Julkiset tietoverkot

Sorakuilu

Demo 2, html-perusteita

linkki-elementti

  1. Laadi kansiorakenne, jossa on juurikansio ja sen sisällä linkkejä sisältävä index.html
  2. Laadi kansion alle seuraavat alikansiot: kuvat, demot ja harj
  3. Siirrä itseäsi kuvaava kuva (omakuva.jpg) alikansioon kuvat
  4. Siirä demo1.html alikansioon demot
  5. Siirä harj1.html alikansioon harj
  6. Tee uusi sivu (tiedosto) index.html juurikansioon (html)
  7. Lisää index.html -sivulle seuraavat asiat:
    1. Linkki harj1.html:ään
    2. Linkki demo1.html:ään
    3. omakuva.jpg kansiosta kuvat
  8. Lisää harj1.html ja demo1.html tiedostoihin linkki "Takaisin etusivulle", linkin tulee johtaa takaisin index.html-sivulle.
  9. Lisää linkki w3schools.comin sivulle siten, että kuvaruudulle avautuu uusi välilehti sivustoa varten
  10. Lisää linkki leeniemi.net -sivustolle siten, että se avautuu samaan ikkunaan kuin demo

html-lähdekoodi

<html>
<head>
    <meta charset="UTF-8">
    <title>Leenan palautussivu</title>
</head>

<body>
<h1>Palautukset</h1>

<img src="./kuvat/omakuva.jpg" alt="omakuva">


<h2>Demot</h2>

<ul>
    <li><a href = "./demot/demo1.html">Demo 1</a></li>
</ul>

<h2>Harjoitukset</h2>

<ul>
    <li><a href = "./harj/harj1.html">Harjoitus 1</a></li>

</ul>

<h2>Tärkeitä linkkejä</h2>
<ul>
        <li><a href="http://www.leeniemi.net" target= "top">Leenan oppimateriaalit</a></li>
        <li><a href="https://www.w3schools.com" target ="_blank">W3Schoolsin materiaalit</a></li>
</ul>

</body>
</html>