HTML-tiedoston perusteet: rakenne, avaaminen ja muokkaus
Tämä artikkelisarja käsittelee HTML-tiedoston rakenteen keskeisiä peruskäsitteitä. Näiden käsitteiden ymmärtäminen on ensimmäinen askel kohti verkkosivujen rakenteen syvällisempää ymmärrystä ja hallintaa. Vaikka nykyisin käytetään julkaisujärjestelmiä (kuten WordPress tai HubSpot), tiedostotason ymmärrys HTML-kielen perusteista on kriittistä, jotta:
- Ymmärrät, mitä pellin alla tapahtuu: Tiedät, miten selain muuttaa tekstin visuaaliseksi kokemukseksi.
- Vianetsintä helpottuu: Kun tiedät, miten eri tiedostopäätteet eroavat palvelimella, osaat korjata virheitä nopeammin.
- Valitset oikeat työkalut: Ymmärrät, milläisilla työkaluilla koodia voi tarkastella ja muokata, ja säästät aikaa välttämällä teknisiä sudenkuoppia.
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:
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.
