HTML-sivupohja

html-websivu-kuvana

Kuvan vasen puoli esittää html-kuvauksena oikeanpuoleisen verkkosivun.

Verkkosivut pohjaavat HTML-kuvauskieleen (Hyper Text Markup Language), jonka avulla nettisisällöt esitetään ja muotoillaan sivuilla. Normaali tekstinkäsittelyohjelma esittää tekstin muotoilut valmiina valintoina, mutta – HTML-kieli kuvaa tekstin muotoilun selaimille, . Tämän lisäksi hypertekstiin voi html:n avulla upottaa kuvia, linkkejä, video- ja äänitiedostoja, karttanäkymiä sekä pelejä. Hyperteksti on väline, joka yhdistää internetin mahdollisuudet yhteen käyttöliittymään.

Harjoitteen valmistelu

Luo koulun palvelimelle luokan omaan kansioon alakansio luokan nettisivuille. Voit nimetä kansion haluamallasi tavalla. Luo kansioon index.html -tiedosto (voit ladata sen vaikka tästä). Mallisivun pohjassa on hyvä olla kuvattuna:

  • otsikko
  • linkki/linkkejä
  • kuva
  • muotoiltua tekstiä

Luokan oman nettisivu-kansion sisälle kannattaa luoda kuvat-kansio. Tällöin kuvien linkkiosoite tulee muotoon …/kuvat/tiedostonnimi.jpg (tai .gif .png) Lataa kuvat-kansioon ensimmäinen kuva, jonka linkität etusivuusi (index.html -sivu). (tallenna mallisivu tästä: index – hiiren oikealla napilla painamalla linkkiä saat valittua tallenna / save as)

Lapset muokkaavat sivua

Ensimmäisen harjoitteen ideana on vain antaa ensikosketus verkkosivujen tekemiseen. Tärkeintä on, että lapset ymmärtävät verkkosivujen peruslogiikka, kuten linkittymisen sekä monimedialliset mahdollisuudet. Sivuja muokatessa harjoitellaan muutama peruskäsite: tagit, linkittäminen sekä materiaalin upottaminen.

Pyydä lapsia avaamaan index.html -tiedosto napsauttamalla hiiren oikealla napilla ja valitsemalla ”avaa tiedosto” notepad++ (tarvittaessa notepad) -ohjelmalla. Ohjelmassa voitte editoida verkkosivua. Ensimmäiseksi jokaisen oppilaan tulee tallentaa tiedosto oman ”sivunsa” nimiseksi. Esimerkiksi karhu.html, kettu.html riippuen verkkosivujenne teemasta.’

HTML-sivuissa on koneelle luettavaksi sivun koko rakenne. Osa sivusta näytetään käyttäjälle, osa tiedoista näkyy vain yläpidolle tai kun avaa selaimella sivun lähdekoodin. HTML-tiedostot tallennetaan omassa tallennusmuodossaan .htm tai .html.

Tagi. HTML-kuvauskielessä tagiksi nimitetään komentoa, joka kuvailee esimerkiksi muotoilua. Muotoiltava sisältö upotetaan tagien väliin ja selain tulkitsee tagien komennon näyttämällä halutun muotoilun käyttäjälle. Esimerkiksi tekstiä voi painottaa komennolla <strong> strong </strong>, jolloin teksti lihavoituu tummemmaksi ja paksummaksi. Tässä yksi opas aloittelijoille.

Linkit ja kansiorakenne. Verkko- ja palvelinympäristö muodostuu tietokoneista, kovalevyistä ja niiden välisistä yhteyksistä. Jokaisella verkossa olevalla koneella ja palvelimella on oma osoitteensa ja kun sisältöä linkitetään esiin,  viitataan juuri näihin osoitteisiin. Osoitteen voi kirjoittaa ip-osoite -muodossa numerosarjana tai helpommin ihmisille tulkattuna tekstimuotoisena, jolloin ip-osoitteelle on ostettu nimi, johon viitataan.

Verkkosivujen osoite on esimerkiksi muotoa http://www.remiksi.net/wp-content/uploads/2014/11/remiksi-bannis-940.gif

  • http – kone käyttää http -protokollaa (voi olla myös https (suojattu yhteys), ftp tai mail to)
  • /www.remiksi.net – palvelimen osoite (osoite on ostettu ja ohjautuu tälle palvelimelle)
  • /wp-content – wodr press julkaisujärjestelmän käyttämä kansiorakenne sisällölle (näitä sivustoja ylläpidetään word pressin avulla)
  • /uploads/2014/11 – lisää palvelimen sisäisiä kansiorakenteita (voit tehdä myös omalle koneelle sisäkkäisiä kansioita jäsentämään tiedostojasi)
  • /remix-bannis-940.gif – kuvatiedoston nimi. (Tiedosto on ladattu palvelimelle omalta pöytäkoneelta käyttäen word press ylläpitojärjestelmää.)

Jotta voit linkittää sivuja, ääntä, kuvia tai videoita, täytyy sinun tietää mistä tämän sisällön esität. Pyri pitämään omien sivujesi kansiorakenteet loogisina, jotta löydät omat tiedostosi paremmin.

Materiaalin upottaminen. Kuten linkkien käyttäminen, myös materiaalin upottaminen vaatii tiedon tiedoston sijainnista. Ensiksi se pitää siis ladata palvelimelle. Samalle verkkosivulle voi upottaa sisältöä lukuisista eri lähteistä. Voit esittää videon YouTubesta, kuvan Flickristä ja laittaa musiikkia SoundCloudista. Näissä palvelut tarjoavat verkkosivuosoitteiden lisäksi mahdollisuuden linkittää sisältö omalta palvelimeltaan ulkoisille sivuille. Etuna on se, että tavallisella kuluttajalla on harvoin omalla palvelimellaan riittävästi esim. videotiedostojen tai sovellusten vaatimaa tilaa. Mediatiedostojen latausta helpompaa on linkittää materiaali vain katseltavaksi/kuultavaksi ja luottaa näiden palveluntarjoajien osaamiseen. Tietenkin samalla hyväksyy sen, että palveluntarjoajat ovat kaupallisia toimijoita, jotka pyrkivät hyötymään kuluttajista mm. esittämällä näille mainontaa.

 

Kommentointi on suljettu.