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:
<body>This is where all the visible website content is stored.</body>Tikai saturs starp ievadzīmēm (<body>) un noslēguma zīmēm (</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>
<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>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>
<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>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>
<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>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>
<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>Fona pielāgošana HTML <body>
Ja vēlaties mainīt HTML fonu ar CSS, to varat izdarīt arī HTML <body>. Šeit ir norādīts, kā iestatīt fona krāsu:
<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>Lai ievietotu attēlu, izmantojiet šo kodu:
<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>