Sähköinen asiointipalvelu, johdanto

Sorakuilu

Demo 5, lisää HTML:ää

Lataa seuraavat kuvat itsellesi:
pieni kala
mustekala
rapu

Muokkaa html-demoa 2 (tori)

  • Lisää kuvat dokumenttiin vierekkäin kohdan "markkinat" alapuolelle
  • Lisää dokumentin loppuun ennen copyright -riviä yhteydenottolomake
    action =http://www.leeniemi.net/lomakedemo4.php"
    sisältää seuraavat pakolliset kentät sähköposti (name="email"), nimimerkki (name="nimi"), palaute (name="syy"), pvm (name="pvm")
    testaa lomakkeen toimivuus php:lla
  • Tee yläosaan navigointirivi, jossa ovat seuraavat linkit: Kalatori, Markkinat 2020, Hinnasto, Missä olemme, Ota yhteyttä

Muokkaa ulkoasua

  • Sijoita otsikko h1:een valitsemasi Google-fontti
  • Jaa tiedosto 5 osaan (section), linkitä navigointipainikkeet oikeaan kohtaan sisällössä
  • Anna osille taustaväri ja/tai taustakuva
    valittu v�riskaala
  • Esitä kuvat pyöreinä ja lisää niille reunaviiva
  • Laita elementeille marginaalit ja sopivat fonttikoot
  • Lisää otsikot hinnastoon ja tee sille ulkoasu, ohuet reunaviivat, värillinen sarakeotsikkorivi
  • Muokkaa lomakkeen ulkoasua

Harjoittele flexboxin käyttöä

  • Tee kuvien ympärille flex-container ja sijoita kuvat vierekkäin keskelle kuvaruutua (koko 100 x 100)

malli"

Jako osiin html

<!DOCTYPE html>
<html lang="fi">
<head>
    <meta charset="UTF-8">
    <title>Apudemo</title>
    <link rel ="stylesheet" type="text/css" href="apudemo.css">
</head>
<body>
    <section id="kalatori"></section>
    <section id="markkinat"></section>
    <section id="hinnasto"></section>
    <section id="yhteys"></section>
    <section id="sijainti"></section>
</body>
</html>

Jako osiin css

html,
body {
    height:100%;
    margin:0;
}
section {
    height:100vh;
}
#kalatori {
    background:lightblue;
}
#markkinat {
    background:lightgreen;
}
#hinnasto {
    background:lightsalmon;
}
#yhteys {
    background:lightgoldenrodyellow;
}
#sijainti {
    background:lightslategray;
}

html-lähdekoodi

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

    <link href="https://fonts.googleapis.com/css2?family=Lobster+Two:wght@700&display=swap" rel="stylesheet">

    <link rel ="stylesheet" type="text/css" href="demo4.css">
</head>

<body>

    <button onclick="topFunction()" id="top" title="Go to top">Top</button>
    <header>
        <ul class="navi">
            <li class="navi"><a href="#kalatori">Kalatori</a></li>
            <li class="navi"><a href="#markkinat">Markkinat</a></li>
            <li class="navi"><a href="#hinnasto">Hinnasto</a></li>
            <li class="navi"><a href="#yhteys">Ota yhteyttä</a></li>
            <li class="navi"><a href="#sijainti">Sijainti</a></li>
        </ul>
    </header>

    <section id="kalatori">
    <a name ="kalatori"><h1>Kalatori</h1></a>
    <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>
    </section>

    <section id="markkinat">
    <a name ="markkinat"><h3>Vuoden 2020 markkinat </h3></a>
    <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>

    <div id="kuvat">
        <img src ="./kuvat/mustekala.jpg" alt = "mustekala" class="round">
        <img src ="./kuvat/pienikala.jpg" alt ="pieni kala" class="round">
        <img src ="./kuvat/rapu.jpg" alt ="rapu" class="round">
    </div>

    </section>

    <section id="hinnasto">
        <a name="hinnasto"><h3>Hinnasto</h3></a>
        <div id="hintaalue">
          
            <div id="paikkakartta">
                <p>
                    <img src="./kuvat/tori.jpg" alt="tori"><br>
                    Paikkakartta
                </p>
            </div>

            <div id="hintataulukko">
                <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>
            </div>
        </div>
    </section>


    <section id="yhteys">
    <a name="yhteys"><h3>Ota yhteyttä</h3></a>

    <form action ="http://www.leeniemi.net/sasp20/lomakedemo4.php" method ="post">
    
        Nimimerkki<br>
        <input type = "text" name = "nimi" required placeholder="Voit käyttää omaa nimeäsi tai nimimerkkiä"><br>

        Sähköposti<br>
        <input type ="email"  name ="email" required><br>

        Päiväys<br>
        <input type ="date" name ="pvm"><br>

        Syy<br>
        <textarea rows="6" cols ="50">

        </textarea>
        <br>

        <input type ="reset" value ="Tyhjennä"><br>
        <input type ="submit" value ="Lähetä">
    
    </form>
    </section>

    <section id="sijainti">
    <a name="sijainti"><h3>Sijainti</h3></a>
    <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>
    </section>
    <script>
            //Get the button
            var mybutton = document.getElementById("top");
            
            // When the user scrolls down 20px from the top of the document, show the button
            window.onscroll = function() {scrollFunction()};
            
            function scrollFunction() {
              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                mybutton.style.display = "block";
              } else {
                mybutton.style.display = "none";
              }
            }
            
            // When the user clicks on the button, scroll to the top of the document
            function topFunction() {
              document.body.scrollTop = 0;
              document.documentElement.scrollTop = 0;
            }
            </script>
</body>
</html>

css-lähdekoodi

h1 {
    font-family: 'Lobster Two', cursive;
    font-size:5em;
}

html,
body {
    height:100%;
    margin:0;
    padding:0;
    font-family:"Trebuchet MS",Verdana, sans-serif;
    font-size:1.1em;
}

header {
    background-color: #ffffff;
    width: 100%;
    text-align:center;
    height:40px; 
}

#paikkakartta {
    width:45%;
    float:left;
}

#hintataulukko {
    width:45%;
    float:left;
}

#hintaalue {
    display: flex;
    justify-content: center;
}

ul.navi {
    width: fit-content;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
    height:40px;
  }
  
  li.navi {
    float: left;
  }
  
  li.navi a {
    display: block;
    color: #000000;
    text-align: center;
    padding: 20px 25px;
    text-decoration: none;
  }
  
  .navi a:hover:not(.active) {
    background-color: #cccccc;
  }
  
  .active {
    background-color:#999999;
  }

img.round {
    border-radius:50%;
}

#kuvat {
    width:100%;
    display: flex;
    justify-content: center;
}


section {
    height:100vh;
    padding-top:30px;
    padding-left:60px;
    padding-right:60px;
    padding-bottom:20px;
}
#kalatori {
    background:lightblue;
}
#markkinat {
    background:lightgreen;
}
#hinnasto {
    background:lightsalmon;
}
#yhteys {
    background:lightgoldenrodyellow;
}
#sijainti {
    background:lightslategray;
}

#top {
    display:none; /*ei näy aluksi*/
    position:fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 2em;
    border:none;
    outline:none;
    background-color:#0000ff;
    color: #ffffff;
    cursor:pointer;
    padding:15px;
    border-radius: 4px;
}
#top:hover {
    background-color:#555;
}