HTML-<body> -tagi

Määrittely ja käyttö

<body> Tagi määrittelee dokumentin pääosan.

HTML-dokumentin metadata ja dokumenttieto sisältyvät head-elementtiin, ja dokumentin sisältö sisältyy body-elementtiin.

body-elementti seuraa aina head-elementtiä, ja se on html-elementin toinen lapsi-elementti.

<body> Elementti sisältää HTML-dokumentin kaikki sisällöt, kuten otsikot, kappaleet, kuvat, hyperlinkit, taulukot, luettelot jne.

Huomioitavaa:HTML-dokumentissa voi olla vain yksi <body> Elementti.

Esimerkki

Yksinkertainen mutta täydellinen HTML-dokumentti:

<!DOCTYPE html>
<html>
  <head>
    <title>Dokumentin otsikko</title>
  </head>
  <body>
    <h1>Tämä on otsikko</h1>
    <p>Tämä on kappale.</p>
  </body>
</html>

Kokeile itse

Vinkki:Lisää esimerkkejä sivun alaosassa.

Globaalit attribuutit

<body> Tagi tukee myös HTML:n globaalit attribuutit.

tapahtumaparametreja

<body> Tagi tukee myös HTML:n tapahtumaparametrit.

Oletusarvoiset CSS-asetukset

Useimmat selaimet käyttävät seuraavia oletusarvoja näyttämiseen <body> Elementti:

body {
  display: block;
  margin: 8px;
}
body:focus {
  outline: none;
}

Kokeile itse

Lisää esimerkkejä

Esimerkki 1

Lisää taustakuvaa dokumenttiin (käyttämällä CSS):

<html>
<head>
<style>
body {
  background-image: url(w3s.png);
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="">Vierailka codew3c.com!</a></p>
</body>

Kokeile itse

Esimerkki 2

Aseta dokumentin taustaväri (käyttämällä CSS):

<html>
<head>
<style>
body {
  background-color: #E6E6FA;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://www.codew3c.com">Vierailka codew3c.com!</a></p>
</body>

Kokeile itse

Esimerkki 3

Aseta dokumentin tekstin väri (käyttämällä CSS):

<html>
<head>
<style>
body {
  color: green;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Tämä on tekstikappale.</p>
<p><a href="">Vierailka codew3c.com!</a></p>
</body>
</html>

Kokeile itse

Esimerkki 4

Aseta dokumentissa vieraantuneiden linkkien väri (CSS:n avulla):

<html>
<head>
<style>
a:link {
  color:#0000FF;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML - oppitunnit</a></p>
</body>
</html>

Kokeile itse

Esimerkki 5

Aseta dokumentissa aktiivisten linkkien väri (CSS:n avulla):

<html>
<head>
<style>
a:active {
  color:#00FF00;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML - oppitunnit</a></p>
</body>
</html>

Kokeile itse

Esimerkki 6

Aseta dokumentissa vieraillut linkkien väri (CSS:n avulla):

<html>
<head>
<style>
a:visited {
  color:#FF0000;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML - oppitunnit</a></p>
</body>
</html>

Kokeile itse

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki