...
Hei.
...
Tämä
...
on
...
opetusteksti,
...
jonka
...
päämääränä
...
on
...
opettaa
...
lukijaansa
...
merkkaamaan
...
HTML-kielellä
...
vastaavanlainen
...
sivu:
...
Paras Avoin Sivu Koskaan AIkuisille
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 |
|---|
<link REL="SHORTCUT ICON" HREF=" [favicon.ico\|view-source:http:/users.metropolia.fi/%7Epetterek/Viikkotehtava/favicon.ico|]"> |
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äkyy seuraavan linkin takaa:
CSS tekstissämme auttaa muodostamaan sivumme taustan ja sen värit sekä fontit ja fonttien värit. Ensimmäiset kolme osiota määrittävät ensin taustan värin ja sitten taustassa näkyvät "suorakulmiot". Loput CSS osiosta (h1.otsikko lähtien) muokkaa tekstin ja linkkejen värejä ja fontteja.
Ja tässä vielä ohjeet loppuun sivuun tarvittavaan koodiin:
