Prvok HTML <body> obsahuje celý viditeľný obsah dokumentu HTML. V jednom dokumente HTML môže byť len jedna oblasť <body>.

Čo je to značka HTML <body> a na čo sa používa?

HTML <body> je prvok HTML, ktorý sa používa na zobrazenie obsahu dokumentu používateľom. Všetok viditeľný obsah, ako sú nadpisy, textové bloky, obrázky, tabuľky, hypertextové odkazy, zoznamy a ďalšie prvky, je uložený v tejto značke HTML. V každom dokumente môže byť len jeden HTML <body>. Ten sa vždy nachádza pod oblasťou <head> a nad pätičkou HTML. Značka <body> podporuje všetky globálne atribúty HTML.

Aká je syntax a funkčnosť HTML <body>?

Než vám na niekoľkých jednoduchých príkladoch ukážeme, ako funguje HTML <body>, stojí za to pozrieť sa na základnú syntax prvku. Vyzerá takto:

<body>This is where all the visible website content is stored.</body>
html

Na príslušnej webovej stránke sa neskôr zobrazí iba obsah medzi úvodnou (<body>) a záverečnou (</body>) značkou.

HTML <body> príkladov

V nasledujúcich príkladoch môžete vidieť, ako sa tag HTML <body> používa v praxi.

HTML dokument s jednoduchým prvkom <body>

Najskôr vytvoríme jednoduchý dokument HTML s nadpisom, textovou časťou a obrázkom, ktoré sú umiestnené v tele dokumentu. Toto je príslušný kód:

<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">
</body>
</html>
html

Vytvorenie navigačnej lišty s href

Nasledujúci príklad ukazuje, ako vytvoriť navigačnú lištu pre vašu webovú stránku pomocou značky HTML <body> a atribútu href. Tu je kód:

<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>
</body>
</html>
html

Vloženie videa pomocou HTML <body> tagu

Ak chcete vložiť video na svoju webovú stránku, sekcia <body> je správnym (a jediným) miestom, kde tak môžete urobiť. Nižšie je uvedený príklad, ako vložiť video:

<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>
</body>
</html>
html

Zmena dizajnu obsahu prostredníctvom HTML <body> tagu

Pomocou CSS môžete tiež použiť oblasť <body> na prispôsobenie dizajnu vášho webového obsahu. Ako to funguje, si môžete pozrieť v nasledujúcom príklade:

<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>
</body>
</html>
html

Prispôsobenie pozadia v HTML <body>

Ak chcete zmeniť pozadie HTML pomocou CSS, môžete tak urobiť aj v HTML <body>. Tu je návod, ako nastaviť farbu pozadia:

<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>
</body>
</html>
html

Na vloženie obrázku použite nasledujúci kód:

<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>
</body>
</html>
html
Prejsť na hlavné menu