Alla on esimerkki perussivusta sekä sivusta, jonka kautta palautetaan harjoituksia linkkeinä. Lopussa on vähän asiaa tavallisimmista rakenteista. Katso tehtävät läpi, ja tee soveltaen siinä määrin kun tarvitset kertausta.
Tehdään sivu, jolla on kaikki perusosat ja muutama linkki. Käytä editorina Notepad++ -ohjelmaa. Kursiivilla kirjoitettu on dataa, jonka voit vapaasti muuttaa. HTML koodituksen merkitys löytyy näppärästi w3schoolsin referenssiosasta .
<html>
<head>
<title>Villen kotisivu</title>
</head>
<body>
<h1>Tervetuloa Villen omille sivuille !!</h1>
<p>
Olen Ville Willi ja opiskelen Metropoliassa.
</br>Tässä muutama suosikkilinkkini:
</p><p>
<a href="http://www.google.com">Suuri hakukone</a>
</br><a href="http://www.tiede.fi">Tiedeuutisia </a>
</p>
</hr>
<p>Päivitetty 4 marraskuuta 2011 VW
</p>
</body>
</html>
Talleta tämä nimellä index.html omaan kansioosi Z:\public_html. Testaa sivun toiminta avaamalla se selaimella File Open...
Lisää jo aloittamallesi sivulle taustaväri ja kuva (tässä yksi vaihtoehto: pete.jpg ). Kuva pitää tallentaa samaan kansioon kuin index.html.
<html>
<head>
<title>Villen kotisivu</title>
</head>
<body bgcolor="#FFFF64">
<h1>Tervetuloa Villen kotisivuille !!</h1><p>Olen Ville Willi ja opiskelen Metropoliassa.<p>Tässä muutama suosikkilinkkini:</p><p> <a href="http://www.google.com">Suuri hakukone</a></br><a href="http://www.tiede.fi">Tiede </a>
</p>
<p>
Pieni lemmikkini: <img src="pete.jpg" title="Puuhapete"></p> <p>
</hr>
<p>Päivitetty 4 lokakuuta 2012 VW
</p>
</body></html>
Tallenna ja testaa.
Lisää sivulle kuvan jälkeen linkki toiselle sivulle, sekä kommenttirivi kuten tässä:
<p><a href="sivu2.html"><font size="4" face="Arial">
<b>Linkit harjoitustöihin ovat toisella sivulla</b></font></a>
<!--huomautus: sivun alatunniste alkaa tästä--><hr>
<!-- text -->
<ul><li>First item in the list </li><li>Next item in the list </li></ul>
2 kertaa 2 taulukkorakenne, jossa ei ole otsikkorivejä:
<table>
<tr>
<td> 1 </td> <td> 0 </td>
</tr>
<tr>
<td> 0 </td> <td> 1 </td>
</tr>
</table>
<a
id="anchor_id"> . . . </a><a
href="#anchor_id"> . . . </a><a
href="URL"> . . . </a><a
href="URL#anchor_id"> . . . </a>
Tee toinen sivu, joka voi toimia pohjana harjoitustöiden palautukselle tai portfoliolle:
<html>
<head>
<title>Villen harjoitukset</title>
</head>
<body bgcolor="#FFFF66">
<h1>Harjoitustehtäviä </h1>
<p>
Perusharjoituksia:
<ul><li><a href="Ville_pres.ppt">PowerPoint esitys aiheena ergonomia</a>
</li><li><a href="Ville_log.html">Luentopäiväkirja </a></li></ul><p><a href="index.html">
<b>Takaisin kotisivulle</b></a><hr>
Päivitetty 14 joulukuuta 2012 VW</body>
</html>
Tallenna se nimellä sivu2.html.
Sijoita kuvasi taulukkoon siten, että se tulee sivun oikeaan reunaan ja teksti vasempaan.
Lopuksi lisää tekijän tiedot alareunaan seuraavasti:
<!--huomautus: sivun alatunniste alkaa tästä--><hr>
<table border="0" width="100%">
<tr>
<td>Ylläpitäjä VW </td>
<td align="center"><a href="mailto:ville.w@metropolia.fi"><img src="email07.gif"></a></td>
<td>Muutettu viimeksi 14.11.2011</td>
</tr>
</table>
Huomaa, että tarvitset linkissä käytetyn kuvan (email07.gif).. Talleta ja testaa.
Taulukot ovat hyödyllinen ja paljon käytetty tapa sivun asettelussa. Erillisiä lohkoja voi määritellä myös käyttäen <div> elementtiä, joka tuottaa kappalejaon. Vastaava, erillisen tekstialueen määrittelevä kappaleen sisäinen elementti on <span> . Näitä käytetään erityisesti tyylien kanssa (styles CSS).
Ohessa joitakin tiedostoja, jotka on väärin koodattu. Kokeile, miten löydät virheitä ja osaatko korjata ne. Merkitse korjaukset kommenteilla. Virheellinen sivu näyttää joissakin Firefoxin ja IE:n versioissa erilaiselta. Muita virheitä:
The World Wide Web Consortium: HTML recommendations (standardit), manuals, css)
W3schools: HTML, CSS, XML and scripting tutorials, hyvin ajan tasalla
Suomenkielinen sivut.web, hiukan vanha
Yleinen HTML validaattori erilaisin optioin on osoitteessa http://validator.w3.org/.
 |
Päivittänyt: Jaana Holvikivi Muutettu 10.1.2013 |
