HTML fonai gali būti sukurti naudojant spalvų vertes arba vaizdo failą. Pa­si­rin­kus tinkamą foną, galima pagerinti svetainės dizainą ir už­tik­rin­ti, kad turinys išliktų aiškus ir lengvai skaitomas.

Kas yra HTML fonai?

Svetainės turinio fonas vadinamas HTML fonu. Šie fonai gali būti nustatyti kuriant puslapį HTML formatu. Juos taip pat galima keisti vėliau, jei reikia. Pagal nu­ma­ty­tuo­sius nu­sta­ty­mus HTML fonai yra balti. Tai keisti re­ko­men­duo­ja­ma ne tik siekiant pagerinti svetainės dizainą, bet ir padidinti turinio matomumą.

Kaip galima pakeisti HTML foną?

Yra du pag­rin­di­niai būdai kurti HTML fonus:

  • taikant spalvos vertę
  • naudojant vaizdą arba gradientą

Šios reikšmės nu­sta­to­mos naudojant HTML atributą style. Kituose skyriuose ap­ra­šy­si­me abu metodus.

HTML fonų api­brė­ži­mas pagal spalvos vertę

Norėdami pakeisti HTML fono spalvą, naudokite style atributą ir background-color arba bgcolor savybę. Yra trys skirtingi spalvos vertės nurodymo variantai:

  • Spalvos pa­va­di­ni­mas: galite nustatyti norimą spalvą tiesiog naudodami jos pa­va­di­ni­mą. Be stan­dar­ti­nių spalvų, tokių kaip red, yellow ar green, taip pat galima naudoti spe­cia­lias spalvas, pvz., lightblue ar deepskyblue. Nurodant spalvą, di­džio­sios ir mažosios raidės ne­svar­bios.
  • Še­šio­lik­tai­nis spalvos kodas: spalvas taip pat galite nurodyti naudodami šešių skaitmenų še­šio­lik­tai­nį skaičių. Jis susideda iš trijų porų, sudarytų iš skaitmenų 9 ir raidžių f. Pirmoji pora reiškia raudonos spalvos vertę, antroji – žalios, o trečioji – mėlynos, kur 00 yra mažiausia vertė, o ff – di­džiau­sia. Pa­vyz­džiui, mėlyna spalva būtų 0000ff.
  • RGB vertė: Taip pat galite naudoti RGB vertę, kuri taip pat yra še­šio­lik­tai­nio spalvų kodo pagrindas. Vertės svyruoja nuo 0 iki 255 ir atitinka raudoną, žalią ir mėlyną spalvas. Pa­vyz­džiui, mėlyna spalva būtų RGB (0, 0, 255).

Sintaksė, kurią naudojate norėdami apibrėžti pa­gei­dau­ja­mą HTML fonų spalvą, atrodo taip:

<body style="background-color: value;">
html

Šiame pavyzdyje naudojame še­šio­lik­tai­nį spalvų kodą, kad nu­sta­ty­tu­me šviesiai mėlyną foninę spalvą:

<html lang="en">
<head>
<title>background-example</title>
</head>
<body>
<div style="background-color: #BFEFFF;">
<h1>Here’s your heading</h1>
<p>
Here’s your website content.
</p>
</div>
</body>
</html>
html

Tai atrodo taip:

Image: HMTL background: Colour example
Sample HTML ba­ck­ground with the hex code ‘#BFEFFF’.

Jei reikia, galite atskirai nustatyti HTML fonų spalvas at­ski­riems savo tink­la­la­pių skyriams. Tai daroma naudojant style atributą ir background-color savybę. Kaip tai veikia, galite pamatyti šiame pavyzdyje, kuriame skir­tin­gos spalvos buvo nu­sta­ty­tos bendram fonui, taip pat <h2> antraščių ir <p> teksto skyrių fonams:

<html lang="en">
<head>
<title>background-example</title>
<style>
body {background-color: #BFEFFF;}
h2 {background-color: #1E90FF;}
p {background-color: #00CED1;}
</style>
</head>
<body>
<h2>The background of this headline is set to DodgerBlue.</h2>
<p>This background is set to DarkTurquoise.</p>
</body>
</html>
html
Image: Example: Three different coloured HTML backgrounds
Example of an HTML ba­ck­ground with three different colours.

Vaizdų nu­sta­ty­mas kaip HTML fonai

Kad ga­lė­tu­mė­te naudoti vaizdus ar grafiką kaip HTML foną, jie turi būti išsaugoti JPG, PNG, SVG, WebP arba GIF vaizdo formatais. Toliau pa­teik­ta­me pavyzdyje parodytas tinkamas kodas, skirtas vaizdui in­te­gruo­ti kaip foną. Vaizdo kelias turi būti pri­tai­ky­tas in­di­vi­dua­liai:

<html lang="en">
<head>
<title>background-example</title>
<style>
	body { background-image: url('/user/folder/assets/background/img/image.svg');	background-size: cover;}
</style>
</head>
<body>
<div style="background-color: rgba(255, 255, 255, 0.8);">
<h1>Here’s your heading</h1>
<p>
Here’s your website content.
</p>
</div>
</body>
</html>
html

Naudodami vaizdą, visada tu­rė­tu­mė­te ne­pa­mirš­ti turinio įskai­to­mu­mo. Nu­ro­dy­da­mi pa­pil­do­mus pa­ra­met­rus, galite koreguoti vaizdo ar grafiko padėtį, kad tekstas būtų aiškiai matomas fone.

Go to Main Menu