# Mikä on HTML-runko ja miten sitä käytetään? HTML `` -elementti sisältää kaiken HTML-asiakirjan näkyvän sisällön. HTML-asiakirjassa voi olla vain yksi ``. ## Mikä on HTML `` -tagi ja mihin sitä käytetään? HTML `` on HTML-elementti, jota käytetään asiakirjan sisällön näyttämiseen käyttäjille. Kaikki **näkyvä sisältö**, kuten otsikot, tekstilohkot, kuvat, taulukot, hyperlinkit, luettelot ja muut elementit, tallennetaan tähän HTML-tagiin. Jokaisessa asiakirjassa voi olla vain **yksi HTML ``**. Se sijaitsee aina `` alapuolella ja HTML-alatunnisteen yläpuolella. `` tukee kaikkia globaaleja HTML-attribuutteja. ## Mikä on HTML ``:n syntaksi ja toiminnallisuus? Ennen kuin näytämme muutaman yksinkertaisen esimerkin avulla, miten HTML `` toimii, on syytä tarkastella elementin perusrakennetta. Se näyttää seuraavalta: ```html This is where all the visible website content is stored. ``` Vain johdanto- (``) ja lopetus- (``) tunnisteiden välinen sisältö näkyy myöhemmin kyseisellä verkkosivulla. ## HTML `` esimerkkiä Seuraavissa esimerkeissä voit nähdä, miten HTML `` -tagiä käytetään käytännössä. ### HTML-dokumentti, jossa on `` yksinkertaista elementtiä Ensin luomme yksinkertaisen HTML-asiakirjan, jossa on **otsikko, tekstiosa ja kuva**, jotka kaikki sijoitetaan tekstiosaan. Vastaava koodi on seuraava: ```html HTML body in a document

Here’s your heading

Here’s your website content.

``` ### Navigointipalkin luominen href-attribuutin avulla Seuraava esimerkki näyttää, kuinka voit luoda navigointipalkin verkkosivustollesi käyttämällä HTML `` -tagiä ja href- attribuuttia. Tässä on koodi: ```html Website with a navigation bar

Home

About

Contact

``` ### Videon upottaminen HTML `` -tagin avulla Jos haluat upottaa videon verkkosivustollesi, `` on oikea (ja ainoa) paikka tehdä se. Alla on esimerkki videon upottamisesta: ```html Website with a video

``` ### Sisällön ulkoasun muuttaminen HTML `` -tagin avulla CSS:n avulla voit myös käyttää `` -aluetta verkkosisällön ulkoasun mukauttamiseen. Seuraavassa esimerkissä voit nähdä, miten tämä toimii: ```html HTML body with visual adjustments

Here’s your heading

Here’s your website content.

``` ### Taustojen mukauttaminen HTML ``:ssa Jos haluat muuttaa [HTML-taustan](https://www.ionos.com/fi-fi/digitalguide/verkkosivustot/verkkosivujen-kehittaeminen/html-taustat/) CSS:llä, voit tehdä sen myös HTML ``:ssä. Näin asetat taustavärin: ```html HTML body with new background colour

Here’s your heading

Visit example-website.com!

``` Kuvan lisäämiseksi käytä alla olevaa koodia: ```html HTML body with new background image

Here’s your heading

Visit example-website.com!

``` This is a markdown version of: [https://www.ionos.com/fi-fi/digitalguide/verkkosivustot/verkkosivujen-kehittaeminen/html-runko/](https://www.ionos.com/fi-fi/digitalguide/verkkosivustot/verkkosivujen-kehittaeminen/html-runko/) for AI/LLM consumption.