Ohjelmointi

| KOTISIVU | KURSSIKUVAUS | OHJELMA JA HARJOITUKSET |

Johdatusta HTML-kieleen

1 Perussivun suunnittelu - osa 1

Tehdään ensin sivu, jolla on kaikki perusosat ja muutama linkki. Käytä editorina joko Notepad 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 2008 VW
</p>
</body>

</html>

Talleta tämä nimellä index.html omaan kansioosi D:\documents\Villen. Testaa sivun toiminta avaamalla se selaimella File Open...

2 Perussivun suunnittelu - harjoitus jatkuu

Lisää jo aloittamallesi sivulle taustaväri ja kuva (pete.jpg tässä).

<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>
Pieni lemmikkini:
<img src="pete.jpg" title="Puuhapete"></p> <p>

</p>
</hr>
<p>Päivitetty 4 lokakuuta 2008 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 - elementtejä

<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.06</td>

</tr>

</table> taulukko päättyy

</body> sivun sisältö päättyy

</html>sivu päättyy

Muita käyttökelpoisia elementtejä:

<!-- text -->
Kommentin lisääminen - ohjelmoinnin perusosia!

Luettelo (unordered list): <ul>

<ul>
<li> First item in the list </li>
<li> Next item in the list </li>
</ul>

Perustaulukko

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>

Hyperlinkit ja ankkurit

<a id="anchor_id"> . . . </a>
Määritellään linkin kohde (bookmark)
<a href="#anchor_id"> . . . </a>
Linkki joka viittaa samalla sivulla olevaan paikkaan.
<a href="URL"> . . . </a>
Linkki ulkoiseen dokumenttiin eli toiselle sivulle
<a href="URL#anchor_id"> . . . </a>
Linkki toisen sivun määriteltyyn kohtaan

3 Perussivun suunnittelu - toinen sivu

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.

4. Jatketaan esimerkkisivun muokkausta

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).

5. Lisäharjoittelua

Ohessa joitakin tiedostoja, jotka on väärin koodattu. Kokeile, miten löydät virheitä ja osaatko korjata ne. Bad code file näyttää joissakin Firefoxin ja IE:n versioissa erilaiselta. Muita virheitä:

6. Hyödyllisiä linkkejä

The World Wide Web Consortium: HTML recommendations (standardit), manuals, css)
W3schools: HTML, CSS, XML and scripting tutorials

| KOTISIVU | KURSSIKUVAUS | OHJELMA JA HARJOITUKSET |
Päivittänyt: Jaana Holvikivi
Muutettu 16.8.2008