...
Hei.
...
Tämä
...
on
...
opetusteksti,
...
jonka
...
päämääränä
...
on
...
opettaa
...
lukijaansa
...
merkkaamaan
...
HTML-kielellä
...
vastaavanlainen
...
sivu:
...
Tiedoston
...
luominen
...
Ohjelmistoksi
...
käy
...
esimerkiksi
...
notepad++,
...
notepad
...
tai
...
Adobe
...
Dreamweaver.
...
Avattuasi
...
valitsemasi
...
ohjelman,
...
aloita
...
tiedosto
...
kirjoittamalla
...
vastaavanlainen
...
rivi:
...
<
...
!Doctype
...
html>
...
Tämä
...
rivi
...
näyttää
...
minkä
...
tyyppinen
...
HTML-tiedosto
...
on
...
kyseessä.
...
Seuraavalle
...
riville
...
kirjoita
...
<head>.
...
Tiedoston
...
mahdolliset
...
CSS-elementit
...
tulevat
...
tälle
...
alueelle.
...
Sulje
...
seuraavaksi
...
alue
...
kirjoittamalla
...
</head>.
...
Tämän
...
tehtyäsi
...
tulee
...
sinun
...
avata
...
tiedoston
...
varsinainen
...
html-alue.
...
Avaa
...
alue
...
kirjoittamalla
...
<body>
...
ja
...
sulje
...
se
...
kirjoittamalla
...
</body>.
...
Näiden
...
väliin
...
voit
...
kirjoittaa
...
yksinkertaista
...
tekstiä
...
ja
...
se
...
tulee
...
sivulle
...
esiin
...
sellaisenaan.
...
Esimerkiksi:
...
<body>
...
Hei,
...
tämä
...
tässä
...
on
...
pätkä
...
tekstiä.
...
</body>
...
Lopuksi,
...
sulje
...
html-pätkä
...
kirjoittamalla
...
</html>.
...
Nyt
...
sinulla
...
on
...
valmiina
...
html-tiedoston
...
perusrakenne
...
ja
...
seuraavaksi
...
pääset
...
täyttämään
...
tulevaa
...
sivuasi
...
sisällöllä.
...
Suosittelemme,
...
että
...
tallennat
...
tiedostosi
...
jo
...
tässä
...
vaiheessa,
...
varmistaen,
...
että
...
tallennat
...
sen
...
.html-muotoon.
...
Kannattaa
...
myös
...
säännöllisin
...
väliajoin
...
tehdä
...
välitallennuksia.
...
Faviconin,
...
CSS-elementtien
...
ja
...
scriptin
...
lisäys
...
Muistatko
...
alueen,
...
jonka
...
alun
...
ja
...
lopun
...
merkitsit
...
<head>
...
ja
...
</head>
...
merkinnöillä?
...
Sivullesi
...
haluamat
...
CSS-elementit
...
kirjoitetaan
...
tähän
...
väliin.
...
CSS-elementit
...
luovat
...
sivuston
...
ulkoasun.
...
Esittelemällämme
...
sivulla
...
on
...
myös
...
käytössä
...
favicon,
...
eli
...
pieni
...
ikoni,
...
joka
...
näkyy
...
esimerkiksi
...
osoiterivillä.
...
Tämä
...
favicon
...
lisätään
...
kirjoittamalla
...
seuraava
...
pätkä:
| Code Block |
|---|
{code}<link REL="SHORTCUT ICON" HREF=" favicon.ico">{code} |
jossa
...
korvaat
...
"favicon.ico"
...
-osan
...
faviconisi
...
tiedostonimellä.
...
Tiedoston
...
tulee
...
olla
...
samassa
...
parent
...
directoryssä
...
kuin
...
kirjoitettava
...
sivu.
...
Sama
...
pätee
...
mahdollisiin
...
"alasivuihin".
...
Sivullamme
...
käyttämä
...
CSS
...
näyttää
...
seuraavanlaiselta
...
:
...