Sähköinen asiointipalvelu, johdanto

Sorakuilu

Demo 2, lisää elementtejä

Laadi sivusto kalatoria varten. Sivuston tarkoitus on myydä toripaikkoja tuottajille.

Kuvat

Tallenna itsellesi seuraavat kuvat sivustoa varten ja muunna molemmat kuvat sopiviksi sivuston käyttöön. Kalan leveydeksi laitetaan 600 px ja torin leveydeksi 400 px.

Sivustolle tulee yläosaan Jem Sahagunin ottama houkutteleva kalatiskin kuva (myös kuvatekstiksi kuvaajan nimi mukaan).

kala

Aluehinnaston viereen sijoitetaan kartta toripaikoista.

tori

Teksti

Kopioi sivuston pohjaksi seuraava teksti:

Kalatori on kalastajalle mahdollisuus myydä saaliinsa tuoreena suoraan vähittäisasiakkaille. 
Se sijaitsee ihanteellisessa paikassa aivan vanhan Pirkkalankylän  keskustassa. 
Torilla pidetään markkinapäiviä ja olemme saaneet torille vakituisen asiakaskunnan.
Julkinen liikenne suosii toria, sijainti on nimen mukaisesti kalasataman vieressä ja linja-autopysäkki on 50 metrin päässä.

Vuoden 2020 markkinat 

Kevätmarkkinat lauantai 11.4. klo 7–16
Juhannusmarkkinat tiistai 16.6. klo 7–15
Elomarkkinat tiistai 17.8. klo 7–15
Syysmarkkinat tiistai 13.10. klo 7–15
Joulumarkkinat tiistai 15.12. klo 7–15

Korostuksia ja muutoksia tekstiin

Muunna teksti "Vuoden markkinat" h3-otsikoksi. Tee lista markkinoista.

Korosta tekstistä

Taulukko

Tee taulukkona aluehinnasto (table), sijoita kuvista aluekartta lähelle hinnastoa.

Jukka Korpelan laatima luettelo entiteeteistä

Kartta

Lisää kartta sijainnista. Torin osoite on Kierikantie 18 33980 Pirkkala.
Zonerin hyvä ohje kartan upotukseen.

Validointi

Validoi sivu.

Copyright

Laita alareunaan kirjoittajan (eli oma nimesi) ja copyright-merkki.

html-lähdekoodi

<!DOCTYPE html>
<html lang="fi">
<head>
    <meta charset="UTF-8">
    <title>Demo 2</title>
</head>

<body>
    <h1>Kalatori</h1>
    <img src="./kuvat/kala.jpg" alt="kala"><br>
    Jem Sahagunin kuva

    <p><strong>Kalatori</strong> on kalastajalle mahdollisuus <b>myydä</b> saaliinsa tuoreena suoraan vähittäisasiakkaille. 
    Se sijaitsee ihanteellisessa paikassa aivan vanhan Pirkkalankylän  keskustassa. 
    Torilla pidetään <mark>markkinapäiviä</mark> ja olemme saaneet torille vakituisen asiakaskunnan.
    Julkinen liikenne suosii toria, sijainti on nimen mukaisesti kalasataman vieressä ja linja-autopysäkki on 50 metrin päässä.</p>



    <h3>Vuoden 2020 markkinat </h3>
    <ul>
        <li><del>Kevätmarkkinat lauantai 11.4. klo 7–16</del></li>
        <li>Juhannusmarkkinat tiistai 16.6. klo 7–15</li>
        <li>Elomarkkinat tiistai 17.8. klo 7–15</li>
        <li>Syysmarkkinat tiistai 13.10. klo 7–15</li>
        <li>Joulumarkkinat tiistai 15.12. klo 7–15</li>
    </ul>

    <h3>Hinnasto</h3>
    <p>
        <img src="./kuvat/tori.jpg" alt="tori"><br>
        Paikkakartta
    </p>

    <table>
        <tr> <!-- otsikkorivi -->
            <th>Tunnus</th> <!-- table head = th -->
            <th>Ala m&sup2;</th> 
            <th>Hinta &euro;</th> 
        </tr>
        <tr>
            <td>A1</td><!-- table data = td -->
            <td>15</td>
            <td>60</td>
        </tr>
        <tr>
            <td>A2</td><!-- table data = td -->
            <td>15</td>
            <td>60</td>
        </tr>
        <tr>
            <td>A3</td><!-- table data = td -->
            <td>15</td>
            <td>60</td>
        </tr>
        <tr>
            <td>A4</td><!-- table data = td -->
            <td>15</td>
            <td>60</td>
        </tr>
        <tr>
            <td>B1</td><!-- table data = td -->
            <td>8</td>
            <td>40</td>
        </tr>
        <tr>
            <td>B1</td><!-- table data = td -->
            <td>8</td>
            <td>40</td>
        </tr>
        <tr>
            <td>B2</td><!-- table data = td -->
            <td>8</td>
            <td>40</td>
        </tr>
        <tr>
            <td>B3</td><!-- table data = td -->
            <td>8</td>
            <td>40</td>
        </tr>
        <tr>
            <td>B4</td><!-- table data = td -->
            <td>8</td>
            <td>40</td>
        </tr>
        <tr>
            <td>B5</td><!-- table data = td -->
            <td>8</td>
            <td>40</td>
        </tr>
        <tr>
            <td>B6</td><!-- table data = td -->
            <td>8</td>
            <td>40</td>
        </tr>
        <tr>
            <td>B7</td><!-- table data = td -->
            <td>8</td>
            <td>40</td>
        </tr>
        <tr>
            <td>B8</td><!-- table data = td -->
            <td>8</td>
            <td>40</td>
        </tr>
        <tr>
            <td>B9</td><!-- table data = td -->
            <td>8</td>
            <td>40</td>
        </tr>
        <tr>
            <td>B10</td><!-- table data = td -->
            <td>8</td>
            <td>40</td>
        </tr>
    </table>

    <h3>Sijainti</h3>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1906.6424288939156!2d23.553976816159064!3d61.45316258245171!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468ed9fa83d6429f%3A0xb142d41e406c097d!2sKierikantie%2018%2C%2033980%20Pirkkala!5e0!3m2!1sfi!2sfi!4v1598336853378!5m2!1sfi!2sfi" width="600" height="450" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

<p>&copy; Leena JN</p>
</body>
</html>