Julkiset tietoverkot

Sorakuilu

Demo 3, html-perusteita

table-elementti

  1. Laadi 1-rivinen ja 2-sarakkeinen taulukko, jonka sisällä lukee ensimmäisessä solussa oma ryhmäsi nimi ja toisessa kuvataan nimen eri osien merkitys (testaa rivinvaihto)
  2. Laadi 1-rivinen ja 7-sarakkeinen taulukko, jossa näkyvät kaikki viikonpäivät
  3. Laadi 7-rivinen ja 2-sarakkeinen taulukko, jossa on viikon ruokalista, käytä taulukon otsikkoa ja sarakeotsikoita
  4. Laadi 3-rivinen ja 3-sarakkeinen taulukko, jonka sisällä on kuvia sekä yhdessä solussa kohta 1

hr-elementti

Piirrä vaakaviiva sivullesi.

Sisäiset linkit

Laadi sivun alkuun luettelo taulukoista ja tee niihin sisäiset linkit.

Testaa otsikot

Kirjoita kaikki otsikkokoot ja laita ne näkyville oikeissa elementeissä.

q-elementti lainausmerkit tekstissä

Kokeile lainausmerkkien tekemistä q-elementtinä.

Kommentointi

Kommentoi tämä demo.

html-lähdekoodi

<html>
    <head>
        <title>
            Demo 3
        </title>
        <meta charset="UTF-8">
        <!-- Tässä määritetään hiukan ulkoasua -->
        <style> 
        table, th, td {border: 1px solid black;}
        img {height:70px;}
        </style>
    </head>
    <body>
        <h1>Taulukoita</h1>
        <ul><!-- #-merkki viittaa sisäiseen linkkiin ja nimi sen perässä elementin id:hen -->
            <li><a href="#taulukko1">Taulukko 1</a></li>
            <li><a href="#taulukko2">Taulukko 2</a></li>
            <li><a href="#taulukko3">Taulukko 3</a></li>
            <li><a href="#taulukko4">Taulukko 4</a></li>
        </ul>

        <hr>

        <h2>Taulukko 1, 1 rivi, 2 saraketta</h2>
        <table id="taulukko1"> <!-- id yksilöi (ja nimeää) elementin -->
            <tr>
                <td>1908TiViPa02</td>
                <td>
                    <pre>
                    19 aloitusvuosi
                    08 aloituskuukausi
                    TiVi Tieto- ja viestintätekniikka
                    P peruskoulupohjainen
                    a ryhmän tunnus
                    02 Hepolamminkadun kampus
                    </pre>
                </td>
            </tr>
        </table>
        
        <h2>Taulukko 2, 1-rivinen ja 7-sarakkeinen</h2>

        <table id="taulukko 2">
            <tr>
                <td>Maanantai</td>
                <td>Tiistai</td>
                <td>Keskiviikko</td>
                <td>Torstai</td>
                <td>Perjantai</td>
                <td>Lauantai</td>
                <td>Sunnuntai</td>
            </tr>
        </table>

        <h2>Taulukko 3, 7-rivinen ja 2-sarakkeinen</h2>

        <table id="taulukko3">
            <caption>Viikon ruokalista</caption>
            <tr>
                <th>Päivä</th>
                <th>Ruoka</th>
            </tr>
            <tr>
                <td>Maanantai</td>
                <td>Lihasoppa</td>
            </tr>
            <tr>
                <td>Tiistai</td>
                <td>Mustamakkara</td>
            </tr>
            <tr>
                <td>Keskiviikko</td>
                <td>Seljanka</td>
            </tr>
            <tr>
                <td>Torstai</td>
                <td>Pizza</td>
            </tr>
            <tr>
                <td>Perjantai</td>
                <td>Stroganoff</td>
            </tr>
            <tr>
                <td>Lauantai</td>
                <td>Uunimakkara</td>
            </tr>
            <tr>
                <td>Sunnuntai</td>
                <td>Grillattu broileri</td>
            </tr>
        </table>

        <h2>Taulukko 4, 3-rivinen ja 3-sarakkeinen</h2>
        <table id="taulukko4">
            <tr>
                <td><img src="../kuvat/omakuva.jpg" alt="omakuva"></td>
                <td><img src="../kuvat/otus.jpg" alt="otus"></td>
                <td><img src="../kuvat/otus.jpg" alt="otus"></td>
            </tr>
            <tr>
                <td><img src="../kuvat/otus.jpg" alt="otus"></td>
                <td><!-- tämän solun sisälle tulee siis uusi taulukko -->
                        <table><!-- tässä alkaa sisällä oleva toinen taulukko -->
                            <tr>
                                <td>1908TiViPa02</td>
                                <td>
                                    <pre>
                                    19 aloitusvuosi
                                    08 aloituskuukausi
                                    TiVi Tieto- ja viestintätekniikka
                                    P peruskoulupohjainen
                                    a ryhmän tunnus
                                    02 Hepolamminkadun kampus
                                    </pre>
                                </td>
                             </tr>
                        </table>
                </td> <!-- Tässä loppuu solu, joka sisältää taulukon -->
                <td><img src="../kuvat/omakuva.jpg" alt="omakuva"></td>
            </tr>
            <tr>
                <td><img src="../kuvat/otus.jpg" alt="otus"></td>
                <td><img src="../kuvat/omakuva.jpg" alt="omakuva"></td>
                <td><img src="../kuvat/otus.jpg" alt="otus"></td>
            </tr>
        </table>
        <q>Tähän pitäisi tulla lainausmerkit.</q>
    
    </body>
</html>