# Kaj je HTML body in kako ga uporabljati

Element HTML `<body>` vsebuje vso vidno vsebino HTML dokumenta. V vsakem HTML dokumentu je lahko samo eno območje `<body>`.

## Kaj je oznaka HTML `<body>` in za kaj se uporablja?

HTML `<body>` je HTML element, ki se uporablja za prikazovanje vsebine dokumenta uporabnikom. Vsa **vidna vsebina**, kot so naslovi, besedilni bloki, slike, tabele, hiperpovezave, seznami in drugi elementi, je shranjena v tej HTML oznaki. V vsakem dokumentu je lahko samo **en HTML `<body>`**. Ta se vedno nahaja pod območjem `<head>` in nad HTML nogo. Oznaka `<body>` podpira vse globalne HTML atribute.

## Kakšna je sintaksa in funkcionalnost HTML `<body>`?

Preden vam na nekaj preprostih primerih pokažemo, kako deluje HTML `<body>`, si oglejmo osnovno sintakso elementa. Ta je naslednja:

```html
<body>This is where all the visible website content is stored.<div class="hash d-none" hidden>hash_950defe4520491841c48654ad64eb12567d2c540</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
```

Na ustrezni spletni strani se bo kasneje prikazala samo vsebina med uvodnim (`<body>`) in zaključnim (`<div class="hash d-none" hidden>hash_950defe4520491841c48654ad64eb12567d2c540</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>`) oznako.

## HTML `<body>` primerov

V naslednjih primerih lahko vidite, kako se oznaka HTML `<body>` uporablja v praksi.

### HTML dokument z enostavnim elementom `<body>`

Najprej bomo ustvarili preprost HTML dokument z **naslovom, besedilnim delom in sliko**, ki so vsi umeščeni v glavnem delu. To je ustrezna koda:

```html
<html>
<head>
<title>HTML body in a document</title>
</head>
<body>
<h1>Here’s your heading</h1>
<p>Here’s your website content.</p>
<img src="example.jpg" alt="Here’s an image">
<div class="hash d-none" hidden>hash_950defe4520491841c48654ad64eb12567d2c540</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Ustvarjanje navigacijske vrstice s href

Naslednji primer prikazuje, kako ustvariti navigacijsko vrstico za svojo spletno stran z uporabo oznake HTML `<body>` in atributa href. Tukaj je koda:

```html
<html>
<head>
<title>Website with a navigation bar</title>
</head>
<body>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
<section id="home"><h2>Home</h2></section>
<section id="about"><h2>About</h2></section>
<section id="contact"><h2>Contact</h2></section>
<div class="hash d-none" hidden>hash_950defe4520491841c48654ad64eb12567d2c540</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Vstavljanje videa prek oznake HTML `<body>`

Če želite v svojo spletno stran vstaviti video, je oddelek `<body>` pravi (in edini) kraj za to. Spodaj je primer, kako vstaviti video:

```html
<html>
<head>
<title>Website with a video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="example-film.mp4" type="video/mp4">
</video>
<div class="hash d-none" hidden>hash_950defe4520491841c48654ad64eb12567d2c540</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Spreminjanje oblike vsebine prek oznake HTML `<body>`

S pomočjo CSS lahko uporabite tudi območje `<body>` za prilagajanje videza vaših spletnih vsebin. Kako to deluje, si lahko ogledate v naslednjem primeru:

```html
<html>
<head>
<title>HTML body with visual adjustments</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #BFEFFF;
}
h1 {
color: black;
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p>Here’s your website content.</p>
<div class="hash d-none" hidden>hash_950defe4520491841c48654ad64eb12567d2c540</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Prilagajanje ozadij v HTML `<body>`

Če želite spremeniti [ozadje HTML](https://www.ionos.com/sl-si/digitalguide/spletne-strani/razvoj-spletnih-strani/html-ozadja/) s CSS, lahko to storite tudi v HTML `<body>`. Tako nastavite barvo ozadja:

```html
<html>
<head>
<title>HTML body with new background colour</title>
<style>
body {
background-color: #BFEFFF;
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p><a href="https://www.example-website.com">Visit example-website.com!</a></p>
<div class="hash d-none" hidden>hash_950defe4520491841c48654ad64eb12567d2c540</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

Za vstavljanje slike uporabite spodnji kod:

```html
<html>
<head>
<title>HTML body with new background image</title>
<style>
body {
background-image: url(example.png);
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p><a href="https://www.example-website.com">Visit example-website.com!</a></p>
<div class="hash d-none" hidden>hash_950defe4520491841c48654ad64eb12567d2c540</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```


This is a markdown version of: [https://www.ionos.com/sl-si/digitalguide/spletne-strani/razvoj-spletnih-strani/html-telo/](https://www.ionos.com/sl-si/digitalguide/spletne-strani/razvoj-spletnih-strani/html-telo/) for AI/LLM consumption.