# Kas yra HTML kūnas ir kaip jį naudoti

HTML `<body>` elementas apima visą matomą HTML dokumento turinį. Viename HTML dokumente gali būti tik viena `<body>` sritis.

## Kas yra HTML `<body>` žymė ir kam ji naudojama?

HTML `<body>` yra HTML elementas, naudojamas dokumentų turiniui rodyti vartotojams. Visas **matomas turinys**, pvz., antraštės, teksto blokai, vaizdai, lentelės, hipersaitai, sąrašai ir kiti elementai, yra saugomi šioje HTML žymėje. Kiekviename dokumente gali būti tik **viena HTML `<body>`**. Ji visada yra po `<head>` sritimi ir virš HTML apačios. `<body>` žymė palaiko visus visuotinius HTML atributus.

## Kokia yra HTML `<body>` sintaksė ir funkcionalumas?

Prieš parodydami, kaip veikia HTML `<body>`, pateikdami keletą paprastų pavyzdžių, verta pažvelgti į pagrindinę elemento sintaksę. Ji atrodo taip:

```html
<body>This is where all the visible website content is stored.<div class="hash d-none" hidden>hash_c5af7108872fafa1ec226652cb7de573e8bc7212</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>
```

Vėliau atitinkamame tinklalapyje bus rodomas tik turinys, esantis tarp įvadinės (`<body>`) ir užbaigiamosios (`<div class="hash d-none" hidden>hash_c5af7108872fafa1ec226652cb7de573e8bc7212</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>`) žymių.

## HTML `<body>` pavyzdžiai

Toliau pateiktuose pavyzdžiuose galite pamatyti, kaip HTML `<body>` žymė naudojama praktikoje.

### HTML dokumentas su paprastu `<body>` elementu

Pirmiausia sukursime paprastą HTML dokumentą su **antrašte, teksto skyriumi ir paveikslėliu**, kurie visi yra įdėti į pagrindinį tekstą. Štai atitinkamas kodas:

```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_c5af7108872fafa1ec226652cb7de573e8bc7212</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>
```

### Navigacijos juostos kūrimas naudojant href

Šis pavyzdys parodo, kaip sukurti navigacijos juostą savo svetainėje naudojant HTML `<body>` žymę ir href atributą. Štai kodas:

```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_c5af7108872fafa1ec226652cb7de573e8bc7212</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>
```

### Vaizdo įterpimas naudojant HTML `<body>` žymę

Jei norite įterpti vaizdo įrašą į savo svetainę, `<body>` skyrius yra tinkama (ir vienintelė) vieta tai padaryti. Toliau pateikiamas pavyzdys, kaip įterpti vaizdo įrašą:

```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_c5af7108872fafa1ec226652cb7de573e8bc7212</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>
```

### Turinio dizaino keitimas naudojant HTML `<body>` žymę

Naudodami CSS, taip pat galite naudoti `<body>` sritį, kad pritaikytumėte savo žiniatinklio turinio dizainą. Kaip tai veikia, galite pamatyti šiame pavyzdyje:

```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_c5af7108872fafa1ec226652cb7de573e8bc7212</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>
```

### Fono pritaikymas HTML `<body>`

Jei norite pakeisti [HTML foną](https://www.ionos.com/lt-lt/digitalguide/interneto-svetaines/interneto-svetainiu-kurimas/html-fonai/) naudojant CSS, tai taip pat galite padaryti HTML `<body>`. Štai kaip nustatyti fono spalvą:

```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_c5af7108872fafa1ec226652cb7de573e8bc7212</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>
```

Norėdami įterpti paveikslėlį, naudokite žemiau pateiktą 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_c5af7108872fafa1ec226652cb7de573e8bc7212</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/lt-lt/digitalguide/interneto-svetaines/interneto-svetainiu-kurimas/html-kunas/](https://www.ionos.com/lt-lt/digitalguide/interneto-svetaines/interneto-svetainiu-kurimas/html-kunas/) for AI/LLM consumption.