Tehdään ensin sivu, jolla on kaikki perusosat ja muutama linkki. Käytä editorina joko Notepad++, Eclipse tai 1st Page 2000 -ohjelmaa. Kursiivilla kirjoitettu on dataa, jonka voit vapaasti muuttaa. HTML koodituksen perusteet on selitetty harjoituksen osan 2 jälkeen tällä samalla sivulla.
<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.newscientist.com">Science news </a>
</p>
</hr>
<p>Päivitetty 4 lokakuuta 2009 VW
</p>
</body>
</html>
Talleta tämä nimellä index.html omaan kansioosi D:\documents\Villen. 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.newscientist.com">Science news </a>
</p>
<p>
Pieni lemmikkini: <img src="pete.jpg" title="Puuhapete"></p> <p>
</hr>
<p>Päivitetty 4 lokakuuta 2009 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>
<html> sivun aloitus
<head> sivun määrittelyosion aloitus
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1"> sivun kooditustietoa (ei välttämätöntä)
<title>Opetus</title> otsaketieto, näkyy selaimen ylänauhassa
</head>sivun määrittelyosion lopetus
<body bgcolor="#FFFFFF"> varsinaisen sivun alku ja taustavärin asetus valkoiseksi
<a href="http://www.evtek.fi"> linkki alkaa
<img src="EVTEK-logo.gif"
>kuva
</a>linkki
päättyy
<b><i>Jaana Holvikivi</b></i> lihavoitu ja kallistettu teksti
<h1>Kurssiohjelmat:</h1> pääotsikko
<p> kappalevaihto
<font size="4" face="Arial"><b>Tietojenkäsittelyn perusteet </b></font><font face="Arial"> </font> kirjasinkoon ja -lajin määrittely, lihavointi
</p> kappaleen loppumerkki
<table border="0" width="100%"> taulukon alku, ei reunuksia, koko sivun leveys
<tr> taulukon rivi
<td> taulukon sarake
Päivittäjä: Jaana Holvikivi
</td> taulukon sarake päättyy
<td align="center">taulukon sarake, teksti keskitetään
<a href="mailto:jaana.holvikivi@evtek.fi"> sähköpostilinkki
<img src="email07.gif" ></a>
</td>
<td>Päivitetty: 10.9.09</td>
</tr>
</table> taulukko päättyy
</body> sivun sisältö päättyy
</html>sivu päättyy
<!-- 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:
<br><a href="Ville_pres.ppt">PowerPoint esitys aiheena ergonomia</a>
<br><a href="Ville_log.html">Luentopäiväkirja </a><p><a href="index.html"><font size="4" face="Arial">
<b>Takaisin kotisivulle</b></font></a><hr>
Päivitetty 14 tammikuuta 2007 VW</body>
</html>
Tallenna se nimellä sivu2.html.
Muuta linkkilistasi tyyliin <ul>.
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.1.2007</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 1.10.2009 |
