Co je HTML tělo a jak ho používat
Prvek HTML <body> obsahuje veškerý viditelný obsah dokumentu HTML. V každém dokumentu HTML může být pouze jedna oblast <body>.
Co je to značka HTML <body> a k čemu se používá?
HTML <body> je HTML prvek, který se používá k zobrazení obsahu dokumentu uživatelům. Veškerý viditelný obsah, jako jsou nadpisy, textové bloky, obrázky, tabulky, hypertextové odkazy, seznamy a další prvky, je uložen v této HTML značce. V každém dokumentu může být pouze jedna <body>. Ta se vždy nachází pod oblastí <head> a nad HTML zápatím. Značka <body> podporuje všechny globální atributy HTML.
Jaká je syntaxe a funkčnost HTML <body>?
Než vám na několika jednoduchých příkladech ukážeme, jak HTML <body> funguje, stojí za to se podívat na základní syntaxi tohoto prvku. Ta vypadá následovně:
<body>This is where all the visible website content is stored.</body>Na příslušné webové stránce se později zobrazí pouze obsah mezi úvodní (<body>) a závěrečnou (</body>) značkou.
HTML <body> příkladů
V následujících příkladech můžete vidět, jak se tag HTML <body> používá v praxi.
HTML dokument s jednoduchým prvkem <body>
Nejprve vytvoříme jednoduchý dokument HTML s nadpisem, textovou částí a obrázkem, které jsou všechny umístěny v těle dokumentu. Odpovídající kód je následující:
<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>Vytvoření navigační lišty s href
Následující příklad ukazuje, jak vytvořit navigační lištu pro váš web pomocí značky HTML <body> a atributu href. Zde 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>Vložení videa pomocí značky HTML <body>
Pokud chcete vložit video na svůj web, správným (a jediným) místem k tomu je sekce <body>. Níže je uveden příklad, jak vložit 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>Změna designu obsahu pomocí HTML <body> tagu
Pomocí CSS můžete také použít oblast <body> k přizpůsobení vzhledu svého webového obsahu. Jak to funguje, si můžete prohlédnout v následujícím příkladu:
<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>Přizpůsobení pozadí v HTML <body>
Pokud chcete změnit pozadí HTML pomocí CSS, můžete tak učinit také v HTML <body>. Zde je návod, jak nastavit barvu pozadí:
<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>Chcete-li vložit obrázek, použijte následující 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>