HTML-taustu saab luua värvi väärtuste või pil­di­fai­liga. Õige tausta valik võib parandada vee­bi­saidi kujundust, tagades samal ajal, et sisu jääb selgeks ja kergesti loetavaks.

Mis on HTML-taustad?

Veebilehe sisu taga olevat ala ni­me­ta­takse HTML-taustaks. Need taustad saab määrata HTML-lehe loomisel. Neid saab vajaduse korral ka hiljem muuta. Vaikimisi on HTML-taustad valged. Selle muutmine on soo­vi­ta­tav mitte ainult veebilehe kujunduse pa­ran­da­miseks, vaid ka sisu nähtavuse pa­ran­da­miseks.

Kuidas saab muuta HTML-taustat?

HTML-taustade ku­jun­da­miseks on kaks peamist viisi:

  • värvi väärtuse ra­ken­da­mi­sega
  • kasutades pilti või gradienti

Need väärtused mää­ra­takse HTML-at­ri­buu­tiga style. Järg­mis­tes jaotistes tut­vus­tame mõlemat meetodit.

HTML-taustade mää­rat­le­mine värvi väärtuse järgi

HTML-tausta värvi muut­miseks kasuta atribuuti style ja omadust background-color või bgcolor. Värvi väärtuse mää­ra­miseks on kolm erinevat võimalust:

  • Värvi nimi: Teil on võimalus määrata soovitud värv lihtsalt selle nime abil. Lisaks stan­dard­vär­vi­dele, nagu red, yellow või green, on või­ma­li­kud ka erivärvid, nagu lightblue või deepskyblue. Värvi mää­ra­misel ei ole tähtede suurus oluline.
  • Hex-värvikood: Värve saab määrata ka kuue­ko­ha­lise kuue­teist­küm­nend­koo­diga. See koosneb kolmest paarist, mis koosnevad numb­ri­test 9 ja tähtedest f. Esimene paar tähistab punast väärtust, teine rohelist ja kolmas sinist, kus 00 on madalaim väärtus ja ff kõrgeim. Näiteks sinine oleks 0000ff.
  • RGB-väärtus: Al­ter­na­tiivina võite kasutada RGB-väärtust, mis on ka kuue­teist­küm­nend­koodi aluseks. Väärtused ulatuvad 0 255 ja vastavad värvidele punane, roheline ja sinine. Näiteks sinine oleks RGB (0, 0, 255).

HTML-taustade soovitud värvi mää­ra­miseks kasutatav süntaks näeb välja järgmine:

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

Järgmises näites kasutame heksa­de­si­maal­set vär­vi­koodi, et määrata taus­ta­vär­viks he­lesi­nine:

<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

See näeb välja selline:

Image: HMTL background: Colour example
Sample HTML backg­round with the hex code ‘#BFEFFF’.

Vajaduse korral saate HTML-taustade värvid mää­rat­leda ka eraldi veebilehe üksikute osade jaoks. Selleks ka­su­ta­takse atribuuti style ja omadust background-color. Kuidas see toimib, näete järg­mi­sest näidisest, kus on määratud erinevad värvid nii kogu taustale kui ka <h2> pealkirja ja <p> tekstiosa taustale:

<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 backg­round with three different colours.

Piltide seadmine HTML-taus­ta­dena

Et pilte või graafikat saaks kasutada HTML-taus­ta­dena, peavad need olema sal­ves­ta­tud JPG-, PNG-, SVG-, WebP- või GIF-pil­di­for­maa­dis. Järgmine näide näitab sobivat koodi pildi taustana in­teg­ree­ri­miseks. Pildi asukoha tee tuleb kohandada in­di­vi­duaal­selt:

<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

Pildi ka­su­ta­misel tuleb alati silmas pidada sisu loetavust. Li­sapa­ra­meet­rite mää­ra­mi­sega saate kohandada pildi või graafiku paigutust, et tekst oleks taustast eristatav.

Go to Main Menu