Hvad er HTML-body, og hvordan bruges det?
<body> -elementet indeholder alt det synlige indhold i et HTML-dokument. Der kan kun være ét <body> pr. HTML-dokument.
Hvad er <body> -koden, og hvad bruges den til?
HTML <body> er et HTML-element, der bruges til at vise indholdet af et dokument til brugerne. Alt synligt indhold, såsom overskrifter, tekstblokke, billeder, tabeller, hyperlinks, lister og andre elementer, gemmes i denne HTML-tag. Der kan kun være én HTML <body> i hvert dokument. Denne placeres altid under <head> og over HTML-fodteksten. <body> understøtter alle globale HTML-attributter.
Hvad er syntaksen og funktionaliteten i HTML <body>?
Inden vi viser dig, hvordan HTML <body> fungerer ved hjælp af et par enkle eksempler, er det værd at se på elementets grundlæggende syntaks. Den ser således ud:
<body>This is where all the visible website content is stored.</body>Kun indhold mellem introduktionskoden (<body>) og afslutningskoden (</body>) vil senere blive vist på den relevante webside.
HTML <body> eksempler
I de følgende eksempler kan du se, hvordan <body> 19-koden bruges i praksis.
HTML-dokument med <body> enkle elementer
Først skal vi oprette et simpelt HTML-dokument med en overskrift, et tekstafsnit og et billede, som alle placeres i brødteksten. Her er den tilhørende kode:
<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>Oprettelse af en navigationsbjælke med href
Følgende eksempel viser dig, hvordan du opretter en navigationsbjælke til din hjemmeside ved hjælp af <body> -koden og href -attributten. Her er koden:
<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>Indlejring af video via <body> 22-koden
Hvis du vil indsætte en video på din hjemmeside, er afsnit <body> det rigtige (og eneste) sted at gøre det. Nedenfor er et eksempel på, hvordan du indsætter en 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>Ændring af indholdets design via HTML <body> -tag
Ved hjælp af CSS kan du også bruge området <body> til at tilpasse designet af dit webindhold. Du kan se, hvordan dette fungerer, i følgende eksempel:
<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>Tilpasning af baggrunde i HTML <body>
Hvis du vil ændre din HTML-baggrund med CSS, kan du også gøre det i HTML <body>. Sådan indstiller du baggrundsfarven:
<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>For at indsætte et billede skal du bruge nedenstående kode:
<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>