HTML

HTML-tiedoston perusteet: rakenne, avaaminen ja muokkaus

Tämä artikkelisarja käsittelee HTML-tiedoston rakenteen keskeisiä peruskäsitteitä. Painopiste on teoreettisissa periaatteissa ja käsitteissä, kuten HTML-elementeissä, tageissa, attribuuteissa ja ominaisuuksissa. HTML-esimerkit ja tekniset rakenteet esitellään oppaan myöhemmissä osissa.

Mikä on HTML-tiedosto?

HTML-tiedosto on tekstimuotoinen tiedosto, joka sisältää kuvauksen verkkosivun rakenteesta jollakin HTML-kielen versiolla kirjoitettuna. HTML-tiedoston tunnistaa siitä, että tiedostopäätteenä on joko .htm tai .html. XHTML-tiedostojen päätteenä voi olla jokin edellä mainituista tai .xhtml. Tällaisia HTML-tiedostoja kutsutaan usein staattisiksi verkkosivuiksi, sillä se näyttävät selaimessa tarkasteltuna aina saman sisällön.

HTML:ää voi hyödyntää myös yhdessä palvelinpuolen ohjelmointikielten, kuten PHP:n ja ASP.NET:n, kanssa. Tällöin syntyy dynaamisia verkkosivuja, jotka poikkeavat staattisista, vain HTML-koodin sisältävistä sivuista. Dynaamisen sivun toiminnallisuus voi muuttua esimerkiksi käyttäjän toiminnan, tietokannan sisällön tai kellonajan perusteella. Tämä mahdollistaa esimerkiksi käyttäjäkohtaisen sisällön, interaktiiviset lomakkeet ja ajantasaiset tiedot. Dynaamisten sivujen kohdalla tiedostopääte heijastaa käytettyä ohjelmointikieltä, esimerkiksi .php (PHP-tiedosto) tai .aspx (ASP.NET-tiedosto).

Verkkosivujen kohdalla tiedostopääte määrittää, miten HTTP-palvelin (kuten Apache tai IIS) käsittelee tiedoston. Staattiset tiedostopäätteet (kuten .html) lähetetään palvelimelta sellaisenaan selaimelle. Dynaamiset tiedostopäätteet (kuten .php) suoritetaan palvelimella kyseisen ohjelmointikielen tulkin avulla, ja vasta tulkin muodostama vastaus lähetetään asiakkaan selaimelle.

Kuinka HTML-tiedoston voi avata?

HTML-tiedoston voi avata kahdella eri tavalla: selaimessa tai tekstieditorissa.

Yleisin tapa HTML-tiedoston tarkastelemiseksi on avata se verkkoselaimessa kuten Chrome tai Edge. Tällöin selain tulkitsee tiedostossa olevan HTML-koodin ja esittää (renderöi) sen visuaalisena ja helppokäyttöisenä nettisivuna. Tämä prosessi on sama, jota selain tekee myös silloin, kun lataat minkä tahansa verkkosivun internetistä.

HTML-tiedoston voi avata myös tekstieditorissa. Tällöin pääset tarkastelemaan nk. lähdekoodia eli "sorsaa". Lähdekoodi kertoo selaimelle mistä elementeistä nettisivu rakentuu, ja miten selaimen tulisi niitä tulisi käsitellä.

Molemmat tavat ovat tärkeitä HTML-kehitysprosessissa: selain näyttää tuloksen, ja tekstieditori mahdollistaa sen luomisen ja ylläpidon.

Miten tarkastella ja muokata HTML-tiedoston lähdekoodia?

HTML-sivun lähdekoodia voi tarkastella ja muokata monin eri tavoin. Yleisimmät menetelmät ovat:

• Perus tekstieditorit: Esimerkiksi Windowsin Muistio (NotePad) on helppo työkalu HTML-koodin muokkaamiseen, mutta se ei tarjoa työkaluja koodin kirjoittamiseen.
• Koodieditorit: Ohjelmat kuten NotePad++ ja Visual Studio Code tekevät HTML-tiedoston muokkaamisesta helpompaa. Ne tarjoavat mm. HTML-syntaksin korostuksen, koodin täydennyksen ja muita hyödyllisiä työkaluja.
• WYSIWYG-editorit (What You See Is What You Get): kuten Adobe Dreamweaver tarjoavat mahdollisuuden työstää verkkosivuja sekä visuaalisesti että koodaamalla.
• Selaimen kehittäjätyökalut: kaikki verkkoselaimet tarjoavat kehittäjätyökaluja sivuston lähdekoodin tarkastelemiseksi ja muokkaamiseksi live-tilassa.

Myös useat tekstinkäsittelyohjelmat, kuten Microsoft Word ja Google Docs, osaavat avata ja tallentaa dokumentteja HTML-muodossa. Vaikka tämä on mahdollista, HTML-tiedostojen muokkaaminen näillä ohjelmilla ei ole suositeltavaa. Tekstinkäsittelyohjelmat saattavat lisätä HTML-tiedostoihin ohjelmakohtaista koodia, joka voi aiheuttaa ongelmia verkkosivun toiminnassa.

Mikä on HTML-tiedoston rakenne?

HTML-tiedosto koostuu useista eri osista, jotka yhdessä muodostavat verkkosivun rakenteen ja sisällön. Näitä ovat muun muassa:

• Merkistö (enkoodaus)
• elementeistä
• elementtien ominaisuuksista
• elementtien kuvaamiseen käytetyistä tageista
• elementtien ominaisuuksia kuvaavista attribuuteista
• elementtien sisältämästä datasta.

Tutustumme näihin rakenteisiin tarkemmin opasartikkelin seuraavissa osissa.

Artikkelin tiedot

Otsikko: HTML-tiedoston perusteet: rakenne, avaaminen ja muokkaus

Kuvaus: Tutustu HTML-tiedostojen rakenteeseen. Opi mitä HTML-tiedostot ovat, miten niitä voi katsella ja muokata – myös ilman aiempaa koodauskokemusta.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: 6.9.2025

Kirjoittaja: Keijo Kortelainen

Keijo on verkkoliiketoiminnan ja digimarkkinoinnin asiantuntija, joka on auttanut satoja suomalaisia yrityksiä kasvattamaan näkyvyyttään ja myyntiään verkossa. Keijolla on BBA-tutkinto verkkokaupasta (BBA in eCommerce) sekä lähes kolmen vuosikymmen kokemus web-teknologioista (mm. HTML, CSS, JavaScript, PHP ja SQL) ja sisältömarkkinoinnista. Hän toimii yrittäjänä, konsulttina ja freelancerina – ja on jakanut osaamistaan 2kmediat.com-sivustolla yli 20 vuoden ajan.

LinkedIn