# Kas ir HTML ķermenis un kā to lietot

HTML `<body>` elements satur visu HTML dokumenta redzamo saturu. Vienā HTML dokumentā var būt tikai viena `<body>` zona.

## Kas ir HTML `<body>` tag un kādam nolūkam to izmanto?

HTML `<body>` ir HTML elements, kas tiek izmantots, lai lietotājiem parādītu dokumenta saturu. Viss **redzamais saturs**, piemēram, virsraksti, teksta bloki, attēli, tabulas, hipersaites, saraksti un citi elementi, tiek saglabāts šajā HTML tagā. Katrā dokumentā var būt tikai **viens HTML `<body>`**. Tas vienmēr atrodas zem `<head>` zonas un virs HTML apakšējās daļas. `<body>` tag atbalsta visus globālos HTML atribūtus.

## Kāda ir HTML `<body>` sintakse un funkcionalitāte?

Pirms mēs parādīsim, kā darbojas HTML `<body>`, izmantojot dažus vienkāršus piemērus, ir vērts apskatīt elementa pamata sintaksi. Tā izskatās šādi:

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

Tikai saturs starp ievadzīmēm (`<body>`) un noslēguma zīmēm (`<div class="hash d-none" hidden>hash_ff1890d5f260a61c28281fc1975904fe62146250</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>`) tiks vēlāk parādīts attiecīgajā tīmekļa lapā.

## HTML `<body>` piemēri

Turpmākajos piemēros var redzēt, kā HTML `<body>` tagu izmanto praksē.

### HTML dokuments ar vienkāršu `<body>` elementu

Vispirms izveidosim vienkāršu HTML dokumentu ar **virsrakstu, teksta sadaļu un attēlu**, kas visi atrodas galvenajā daļā. Šis ir atbilstošais kods:

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

### Navigācijas joslas izveide ar href

Šis piemērs parāda, kā izveidot navigācijas joslu savai tīmekļa vietnei, izmantojot HTML `<body>` tagu un href atribūtu. Šeit ir kods:

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

### Video ievietošana, izmantojot HTML `<body>` tagu

Ja vēlaties ievietot video savā tīmekļa vietnē, `<body>` sadaļa ir pareizā (un vienīgā) vieta, kur to izdarīt. Zemāk ir piemērs, kā ievietot 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_ff1890d5f260a61c28281fc1975904fe62146250</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>
```

### Satura dizaina maiņa, izmantojot HTML `<body>` tagu

Ar CSS palīdzību jūs varat izmantot arī `<body>` zonu, lai pielāgotu savu tīmekļa satura dizainu. Kā tas darbojas, var redzēt šajā piemērā:

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

### Fona pielāgošana HTML `<body>`

Ja vēlaties mainīt [HTML fonu](https://www.ionos.com/lv-lv/digitalguide/timekla-vietnes/timekla-izstrade/html-foni/) ar CSS, to varat izdarīt arī HTML `<body>`. Šeit ir norādīts, kā iestatīt fona krāsu:

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

Lai ievietotu attēlu, izmantojiet šo kodu:

```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_ff1890d5f260a61c28281fc1975904fe62146250</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/lv-lv/digitalguide/timekla-vietnes/timekla-izstrade/html-kermenis/](https://www.ionos.com/lv-lv/digitalguide/timekla-vietnes/timekla-izstrade/html-kermenis/) for AI/LLM consumption.