Tietotekniikan perusteet

| 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 Notepad++ -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.tiede.fi">Tiedeuutisia </a>
</p>
</hr>
<p>Päivitetty 4 marraskuuta 2019 VW
</p>
</body>

</html>

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

2 Perussivun suunnittelu - harjoitus jatkuu

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

</p>
</hr>
<p>Päivitetty 4 lokakuuta 2011 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.09</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 joulukuuta 2011 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.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).

6. Hyödyllisiä linkkejä

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

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