Julkiset tietoverkot

Sorakuilu

Demo 1 - yhdessä

Luo kansiot

Luo ensin K-levylle kansio html ja sen alle alikansiot demot ja kuvat demoja ja kuvia varten.

Laadi www-sivu

Laadi html-koodia opettava sivu

Sivulle tulee otsikoita, tekstikappaleita, luetteloita ohjeineen, linkkejä ja ohjeet samalle sivustolle sekä kuva sijoitusohjeineen.

Sivulle tulee myös ohje siitä, miten sivun saa näkyville ja minkälaisia nimien ja osoitteiden tulee olla.

Kopioi alla oleva kuva alikansioon kuvat nimellä otus.jpg.

Otus

Tallenna sivu nimellä demo1.html alikansioon demot.

html-lähdekoodi

<html>
<head>
    <title>
        Demo 1, perusteita
    </title>

</head>

<body>

    <a href="../index.html">Paluu etusivulle</a>
    <hr>

    <h1>Isoin otsikko</h1>

    <h2>Toiseksi suurin otsikko</h2>
    <p>Tavallinen tekstikappale, selainohjelma rivittää automaattisesti siinä olevan tekstin.</p>
    <p>Toinenkin kappale, kappaleiden väliin jää selvä tyhjä alue. p tulee sanasta paragraph eli kappale.</p>
    <p>Pakotettu rivinvaihto tehdään kirjoittamalla tag br. Rivinvaihto<br>
    Toinen rivi kappaleeseen.</p>

    <h3>Tavallinen lista ul</h3>
    <ul>
        <li>tavallinen lista</li>
        <li>elementti on ul</li>
        <li>sisällä li-elementtejä</li>
    </ul>

    <h3>Numeroitu lista (ordered) ol</h3>
    <ol>
        <li>eka osa</li>
        <li>toka osa</li>
        <li>kolmas osa</li>
    </ol>

    <img src="../kuvat/otus.jpg" alt="Otuksen kuva">

    <ul>
        <li><a href="http://www.leeniemi.net">Leenan oppimateriaalit</a></li>
        <li><a href="https://www.w3schools.com">W3Schoolsin materiaalit</a></li>
    </ul>

</body>
</html>