Harjoitus 3
Viikko 3
Hakemistorakenne
Nettisivuissa on yleensä enemmän kuin yksi sivu. Usein nettisivu koostuu monista sivuista, joista pääsee linkin kautta esimerkiksi alasivulle. Jos kertoisin kotisivuillani harrastuksista, siltä sivulta voisin tehdä linkit alasivuille, joissa esitellään jalkapalloa ja kitaran soittoa. Jalkapallo-sivulta voisin tehdä taas linkin sen alasivulle, jossa esitellään jalkapallon sääntöjä. Tämä hakemistorakenne näkyy Internet sivuilla kansioissa. Ensin olisi kansio Harrastukset. Siellä olisi kansiot ”Jalkapallo” ja ”Kitaran soitto”. ”Jalkapallo” kansiossa olisi taas kansio nimeltä ”Jalkapallon säännöt”.
Hyperlinki alasivuille
Kun kotisivulla halutaan tehdä linkki oman sivun alasivulle, käytetään siinä apuna a-elementtiä. Jos haluaisin tehdä etusivultani linkin Galleria-alasivulle, loisin ensiksi kansion etusivulle, jossa lukisi galleria. Sen jälkeen loisin Galleria-kansioon index.html tiedoston. Tämän jälkeen etusivuni xhtml-kieleen lisäisin seuraavanlaisen tekstin:
Listan tekeminen
Kotisivulla voidaan haluta usein listata asioita (laittaa niitä alekkain). Tällöin voidaan käyttää esimerkiksi järjestämätöntä listaa. Tämä on erittäin käyttökelpoinen ja helppo tehdä.
<ul>
<li> asia yksi </li>
<li> asia kaksi </li>
<li> asia kolme </li>
</ul>
Valmiina selaimessa lista näyttää seuraavalta:
Nettisivuissa on yleensä enemmän kuin yksi sivu. Usein nettisivu koostuu monista sivuista, joista pääsee linkin kautta esimerkiksi alasivulle. Jos kertoisin kotisivuillani harrastuksista, siltä sivulta voisin tehdä linkit alasivuille, joissa esitellään jalkapalloa ja kitaran soittoa. Jalkapallo-sivulta voisin tehdä taas linkin sen alasivulle, jossa esitellään jalkapallon sääntöjä. Tämä hakemistorakenne näkyy Internet sivuilla kansioissa. Ensin olisi kansio Harrastukset. Siellä olisi kansiot ”Jalkapallo” ja ”Kitaran soitto”. ”Jalkapallo” kansiossa olisi taas kansio nimeltä ”Jalkapallon säännöt”.
Hyperlinki alasivuille
Kun kotisivulla halutaan tehdä linkki oman sivun alasivulle, käytetään siinä apuna a-elementtiä. Jos haluaisin tehdä etusivultani linkin Galleria-alasivulle, loisin ensiksi kansion etusivulle, jossa lukisi galleria. Sen jälkeen loisin Galleria-kansioon index.html tiedoston. Tämän jälkeen etusivuni xhtml-kieleen lisäisin seuraavanlaisen tekstin:
<a href="galleria/index.html">Galleria</a> |
Listan tekeminen
Kotisivulla voidaan haluta usein listata asioita (laittaa niitä alekkain). Tällöin voidaan käyttää esimerkiksi järjestämätöntä listaa. Tämä on erittäin käyttökelpoinen ja helppo tehdä.
<ul>
<li> asia yksi </li>
<li> asia kaksi </li>
<li> asia kolme </li>
</ul>
Valmiina selaimessa lista näyttää seuraavalta:
- asia yksi
- asia kaksi
- asia kolme
Harjoitus
- Jatketaan samaa harjoitusta kuin viime tunnilla. Avaa XHTML-kansioon.
- Pasi-Anssin kotisivuilla on seuraavanlaiset alasivut: Musavideot, pelit, urheilu sekä vieraskirja. Luo XHTML-kansioon kyseinen hakemistorakenne. Luot siis jokaiselle alasivulle uuden kansion.
- Luo jokaiseen uuteen kansioon index.html tiedosto.
- Tee etusivulle lista kohdan 2. alasivuista.
- Tee näistä teksteistä (Musavideot, pelit, urheilu, vieraskirja) linkit kyseisille alasivuille.
- Tallenna tekstitiedosto ja tarkastele sitä Internet-selaimessa.