HTML aloitusopas

Mitä on HTML?

HTML on verkkosivujen merkintäkieli

HTML tulee sanoista HyperTextMarkingLanguage. Hyperteksti on tekstiä joka sisältä linkkejä muihin teksteihin.
HTML kieli kuvaa verkkosivun rakennetta ja sisältöä. HTML koostuu sarjasta elementtejä. Elementit kertovat selaimelle, kuinka sisältöä näytetään.
HTML-elementtejä esitetään tunnisteiden eli tagien avulla.
HTML-tagien avulla merkitään sisältökappaleita, kuten "otsikko", "kappale", "taulukko" ja niin edelleen
Selaimet eivät näytä HTML-tunnisteita, vaan selain erottaa ne muusta sisältötekstistä erikoismerkkien < ja /> avulla.

Voit kurkistaa, miltä HTML-koodi näyttää: Klikkaa hiiren 2. painiketta minkä tahansa www-sivun tyhjässä kohdassa ja valitse valikosta "Näytä sivun lähdekoodi". 

Html-koodia voi kirjoittaa aivan tavallisella tekstieditorilla. (Esimerkiksi Windowsin Muistio).
Erotuksena tavallisesta tekstitiedostosta jonka pääte on txt, täytyy html-tiedoston nimen loppuosassa olla pääte html .

Vaikka Windows ei oletuksena tiedostopäätteitä näytäkään, joka tiedostolla on jokin pääte. Näin tietokone osaa avata tiedoston käyttäen oikeaa sovellusta. Eli kun tavallinen tekstitiedosto on nimeltään nimi.txt niin html-muotoinen tiedosto on nimi.html

Tiedoston tallentaminen

Esimerkki 

Avaa Windowsin Muistio ja kopioi-liitä seuraava:
<!DOCTYPE html>
<html>
<head>
<title>Selaimen välilehdessä näytettävä otsikko</title>
</head>
<body>
<h1>Tässä on sivun isoin otsikko.</h1>
<p>Tässä sivun tekstiä, niin kutsuttua leipätekstiä.
Sitä on nyt vain yhden kappaleen verran.
</p>
</body>
</html>

Tallenna tiedosto nimellä nettisivu.html

 

Tämän jälkeen tiedosto näyttää resurssinhallinnassa kuvakkeeltaan erilaiselta kuin tavallinen tekstitiedosto. 


Htlmtiedosto avautuu nyt oletusselaimella.

Tehdessäsi muutoskia html koodiin, kannattaa pitää sekä selainikkuna että tekstieditori (Muistio) auki.
Kun teet muutoksen Muistiolla, tallenna Ctrl+s, siirry selainikkunaan ja päivitä näkymä painamalla F5.