Tehdään aluksi muutama yksinkertainen www-sivun HTML-merkkauskieltä käyttäen. HTML (Hypertext Markup Language) on tapa tehdä rakenteellisesti merkittyjä dokumentteja, jotka voivat sisältää esimimerkiksi tekstiä, kuvia ja linkkejä muihin tiedostoihin. HTML-merkinnöillä eli niin sanotuilla tageilla kuvataan dokumentin rakenne.
Tunnilla: HTML-dokumentin ja tagien rakenne ja eri elementtien käyttäminen sisällön rakenteen määrittämisessä.
Esimerkiksi tagiparin <h1> ja </h1> rajaama elementti on merkitty ensimmäisen tason otsikoksi (header 1), kun taas <p> ja </p> sulkevat sisäänsä tekstikappaleen (paragraph).
Hyvin yksinkertaisen HTML-sivun HTML-merkkaus voisi näyttää seuraavalta:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sivun otsikko</title>
</head>
<body>
<h1>Ensimmäisen tason otsikko</h1>
<p>Tekstikappale</p>
</body>
</html>Title-elementti
Title kannattaa valita huolellisesti siten, että se antaa selkeän kuvan dokumentin sisällöstä. Title näkyy yleensä muun muassa hakukoneiden tuloksissa löydetyn sivun kuvauksena, joten hyvin valittu title voi lisätä sivuille löytävien vierailijoiden määrää. Esimerkiksi Etusivu on huono title, koska se ei kerro mitään sivun tai sivuston sisällöstä.
Kolme toisiinsa linkitettyä HTML-tiedostoa
Edellisen pohjalta luomme kolme HTML-tiedostoa omaan julkiseen www-hakemistoon. Pääsivu tallennetaan nimellä index.html, ja kaksi alasivua esimerkiksi cv.html ja portfolio.html.
Tunnilla: Kuinka sivut saa webiin? Mitä eri tapoja on saada tiedostot www-palvelimelle. Jos opiskelijoilla on esimerkiksi kodin internet-yhteyteen sisältyvää kotisivutilaa, voimme jossain vaiheessa kurssia tutkia niiden käyttöönottoa.
Navigaatio
Luomme sivuille yksinkertaisen navigaatio-osion, jossa näkyvät aina kaikkien kolmen sivun viittaukset siten, että kahden sivun linkit ovat aktiivisia, mutta sen sivun ”linkki”, joka parhaillaan on auki, ei ole aktiivinen. Teemme navigaation <ul> – eli listaelementtiä käyttäen esimerkiksi etusivulle seuraavasti:
<ul>
<li>etusivu</li>
<li><a href="portfolio.html">portfolio</a></li>
<li><a href="cv.html">CV</a></li>
</ul>Etusivulla on siis aktiiviset linkit CV- ja linkit-sivuille. Linkki rakentuu yksinkertaisimmillaan seuraavasti:
<a href="kohdetiedoston_nimi">linkkiteksti</a>
Lisäämme vielä sivuillemme muutamia muita HTML-elementtejä, esim. pari erilaista listaa ja jonkin kuvan. Jos haluat tutustua muihinkin HTML-elementteihin, katso dokumentti HTML Tags Ordered Alphabetically, jossa kaikki käytettävissä olevat elementit on listattu aakkosjärjestyksessä.
Kun kolmen sivun rakenne ja alustava sisältö on valmis, tutustumme erilaisiin tapoihin listätä dokumentteihin ulkoasumäärityksiä.