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ä:
<link REL="SHORTCUT ICON" HREF=" 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:
