Avaa TextWrangler (tai NotePad++ tms) ja index sivu, jonne tulee sivun perusrakennekoodi.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<title>Sivujen nimi</title>
<body>
</body>
</html>
Koodi sisältää kielen(en) , koodityypin(html), näppäimistön kielen (utf-8), välilehden otsikon (title) ja rungon (body).
Tekstin kaikki sisältö lisätään <body> tähän </body> väliin.
kuvakoodi:
<img src="kuvan osoite tähän"> Kuva oltava samassa kansiossa kuin html tiedosto. Kuvan voi myös lisätä laittamalla kuvan www osoitteen koodiin, mutta jos alkuperäinen kuva netistä poistetaan, kuva ei enää toimi sivuillasi.
Linkkikoodi
<a href="linkin osoite tähän">linkkiteksti tähän</a> Linkiksi voi laitta myös kuvan ja sen aukeamispaikan voi vaihtaa
Taustaväri
<style>
body {background-color:värikooditähän; }
</style>
<style> koodi tulee <head> koodin sisään
Värin voi määrittää värikoodilla, kirjoittamalla esim yellow tai rgb(255,0,0) (r=red g=green b=blue)
Taustaksi voi myös laittaa kuvan.
Favicon eli välilehden pikkukuva
<link rel="icon" href="kuvan osoite.jpg" type="image/jpg">
kirjoitetaan <head> koodin sisään.
Julkaiseminen
Tallenna kaikki kotisivulle kuuluvat tiedostot samaan paikkaan. Avaa CyberDuck macilla ja paina "Open Connection" Laita serverin osoite shell.metropolia.fi ja kirjaudu Metropolian tunnuksilla sisään. Siirrä kotisivuusi kuuluvat tiedostot sinne. Nyt sivusi näkyvät kaikille.
Linkki sivuillemme: http://users.metropolia.fi/~annikkj/indexkokeilu.html