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, nau­do­ja­mas dokumentų turiniui rodyti var­to­to­jams. Visas matomas turinys, pvz., antraštės, teksto blokai, vaizdai, lentelės, hi­per­sai­tai, sąrašai ir kiti elementai, yra saugomi šioje HTML žymėje. Kiek­vie­na­me dokumente gali būti tik viena HTML <body>. Ji visada yra po <head> sritimi ir virš HTML apačios. <body> žymė palaiko visus vi­suo­ti­nius HTML atributus.

Kokia yra HTML <body> sintaksė ir funk­cio­na­lu­mas?

Prieš pa­ro­dy­da­mi, kaip veikia HTML <body>, pa­teik­da­mi keletą paprastų pavyzdžių, verta pažvelgti į pag­rin­di­nę elemento sintaksę. Ji atrodo taip:

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

Vėliau ati­tin­ka­ma­me tink­la­la­py­je bus rodomas tik turinys, esantis tarp įvadinės (<body>) ir už­bai­gia­mo­sios (</body>) žymių.

HTML <body> pa­vyz­džiai

Toliau pa­teik­tuo­se pa­vyz­džiuo­se galite pamatyti, kaip HTML <body> žymė naudojama prak­ti­ko­je.

HTML do­ku­men­tas su paprastu <body> elementu

Pir­miau­sia sukursime paprastą HTML dokumentą su antrašte, teksto skyriumi ir pa­veiks­lė­liu, kurie visi yra įdėti į pag­rin­di­nį tekstą. Štai ati­tin­ka­mas kodas:

<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­ga­ci­jos juostos kūrimas naudojant href

Šis pavyzdys parodo, kaip sukurti na­vi­ga­ci­jos juostą savo sve­tai­nė­je naudojant HTML <body> žymę ir href atributą. Štai kodas:

<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

Vaizdo įterpimas naudojant HTML <body> žymę

Jei norite įterpti vaizdo įrašą į savo svetainę, <body> skyrius yra tinkama (ir vie­nin­te­lė) vieta tai padaryti. Toliau pa­tei­kia­mas pavyzdys, kaip įterpti vaizdo įrašą:

<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

Turinio dizaino keitimas naudojant HTML <body> žymę

Naudodami CSS, taip pat galite naudoti <body> sritį, kad pri­tai­ky­tu­mė­te savo ži­nia­tink­lio turinio dizainą. Kaip tai veikia, galite pamatyti šiame pavyzdyje:

<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

Fono pri­tai­ky­mas HTML <body>

Jei norite pakeisti HTML foną naudojant CSS, tai taip pat galite padaryti HTML <body>. Štai kaip nustatyti fono spalvą:

<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

Norėdami įterpti pa­veiks­lė­lį, naudokite žemiau pateiktą 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