HTML <body> element sisaldab kogu HTML-dokumendi nähtavat sisu. Igas HTML-do­ku­men­dis võib olla ainult üks <body> ala.

Mis on HTML <body> -märge ja milleks seda ka­su­ta­takse?

HTML <body> on HTML-element, mida ka­su­ta­takse dokumendi sisu ka­su­ta­ja­tele ku­va­miseks. Kõik nähtav sisu, nagu peal­kir­jad, teks­tib­lo­kid, pildid, tabelid, hü­per­lin­gid, loendid ja muud elemendid, sal­ves­ta­takse selle HTML-sildiga. Igas do­ku­men­dis võib olla ainult üks <body>. See asub alati <head> ala all ja HTML-jaluse kohal. <body> silt toetab kõiki glo­baal­seid HTML-atribuute.

Mis on HTML <body> süntaks ja funkt­sio­naal­sus?

Enne kui näitame teile mõne lihtsa näite abil, kuidas HTML <body> töötab, tasub tutvuda elemendi põhilise sün­tak­siga. See näeb välja järgmine:

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

Ainult sis­se­ju­ha­tava (<body>) ja lõpetava (</body>) sildi vahel olev sisu kuvatakse hiljem as­ja­oma­sel vee­bi­lehel.

HTML <body> näidet

Järg­mis­tes näidetes näete, kuidas <body> praktikas ka­su­ta­takse.

HTML-dokument lihtsa <body> ele­men­diga

Esmalt loome lihtsa HTML-dokumendi, millel on pealkiri, tekstiosa ja pilt, mis kõik asuvad dokumendi põhiosas. Selle kood on järgmine:

<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

Na­vi­gat­sioo­ni­riba loomine href-iga

Järgmine näide näitab, kuidas luua vee­bi­sai­dile na­vi­gee­ri­mis­ri­baga <body> ja href-at­ri­buu­tiga. Siin on kood:

<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

Video lisamine HTML <body> -märgise abil

Kui soovite oma vee­bi­sai­dile video lisada, on <body> jagu selleks õige (ja ainus) koht. Allpool on näide video lisamise kohta:

<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

Sisu kujunduse muutmine HTML <body> -märgise abil

CSS-i abil saate kasutada ka <body> ala oma veebisisu kujunduse ko­han­da­miseks. Selle toimimist näete järg­mi­sest näidisest:

<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

Taustade ko­han­da­mine HTML-is <body>

Kui soovite muuta HTML-taustat CSS-iga, saate seda teha ka HTML <body>-s. Taus­ta­värvi sea­dis­ta­mine toimub järg­mi­selt:

<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

Pildi li­sa­miseks kasuta allpool olevat koodi:

<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