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 pri­ka­zo­va­nje vsebine dokumenta upo­rab­ni­kom. Vsa vidna vsebina, kot so naslovi, besedilni bloki, slike, tabele, hi­per­po­ve­za­ve, 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 funk­ci­o­nal­nost HTML <body>?

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

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

Na ustrezni spletni strani se bo kasneje prikazala samo vsebina med uvodnim (<body>) in za­ključ­nim (</body>) oznako.

HTML <body> primerov

V na­sle­dnjih primerih lahko vidite, kako se oznaka HTML <body> uporablja v praksi.

HTML dokument z eno­stav­nim elementom <body>

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

<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

Ustvar­ja­nje na­vi­ga­cij­ske vrstice s href

Naslednji primer prikazuje, kako ustvariti na­vi­ga­cij­sko vrstico za svojo spletno stran z uporabo oznake HTML <body> in atributa href. Tukaj je koda:

<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

Vsta­vlja­nje 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>
<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

Spre­mi­nja­nje oblike vsebine prek oznake HTML <body>

S pomočjo CSS lahko uporabite tudi območje <body> za pri­la­ga­ja­nje videza vaših spletnih vsebin. Kako to deluje, si lahko ogledate v na­sle­dnjem primeru:

<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

Pri­la­ga­ja­nje ozadij v HTML <body>

Če želite spre­me­ni­ti ozadje HTML s CSS, lahko to storite tudi v HTML <body>. Tako nastavite barvo ozadja:

<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

Za vsta­vlja­nje slike uporabite spodnji kod:

<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
Go to Main Menu