TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN
YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi
VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word Kotisivujen tekoon suunnatut ohjelmat Esimerkiksi Microsoft FrontPage ja Adobe Dreamweaver Kurssilla käytetty ohjelma Dreamweaver FTP-ohjelma
HTML
ESIMERKKI OULUN YLIOPISTON MEDICAL HUMANITIES GROUPIN KOTISIVU
HTML WWW-sivuilla voi olla monenlaista sisältöä, kuten grafiikkaa, kirjoitusta, kaavakkeita, ääntä ja videota jne. Sisältö voidaan esittää monilla eri tavoilla Jokainen WWW-sivu on erilainen, mutta useimmiten sivuja yhdistää se, että ne on luotu kättämällä HTML-kieltä (Hypertext Markup Language) HTML-dokumentit, joista WWW-sivut muodostuvat, ovat Tekstitiedostoja, jotka sisältävät ohjausmerkkejä
HTML-OHJAUSMERKIT Ohjausmerkit merkitään HTML-kielessä merkkien < ja > väliin Esim. <html> aloittaa HTML-dokumentin ja </html> lopettaa sen Ohjausmerkit kertovat selaimelle, kuinka sen pitää esittää sivu
SELAIMET Käyttäjän käyttämä ohjelma WWW-sivujen katseluun Saatavilla useita erilaisia selaimia: mm. Google Chrome, Microsoft Internet Explorer, Mozilla Firefox jne. WWW-sivuja luotaessa on otettava huomioon, että eri selaimilla saattaa olla joitakin erityispiirteitä Yleensä selaimet hakevat selattavat sivut WWWpalvelimelta Selaimella voi kuitenkin avata myös omalla koneella olevia HTML-dokumentteja ennen kuin näitä on siirretty palvelimelle
WWW-PALVELIMET Tietokone, joka on kiinteässä yhteydessä Internetiin suorittaa palvelinohjelmistoa vastaa WWW-selainten kutsuihin saada WWW-sivuja käyttöönsä Melkein mikä vain tietokone voi olla WWW-palvelin Palvelimet ovat kuitenkin yleensä palvelinkäyttöön pyhitettyjä koneita Saatavilla lukematon määrä valmiita palvelimia, joista voi ostaa kotisivutilaa
URL Universal Resource Locator Internet sisältää lukemattoman määrän erilaisia resursseja, joista jokainen on linkattavissa Linkkaamisessa käytetään resurssin sijaintia, jonka kertoo URL-osoite
URL JA SEN KOMPONENTIT http://www.oulu.fi/hutk/historia/index.html http:// protokolla www.oulu.fi verkkotunnus tai verkkonimi /hutk/historia/ polku index.html tiedoston (resurssin) nimi
HTML-KIELEN SYNTAKSI JA SÄÄNNÖT HTML on yksinkertainen kieli WWW-sivujen sisällön kuvailemiseen selaimelle HTML-kielessä kolmenlaisia komponentteja: Elementeiksi kutsutaan eri ohjausmerkkien erottamia osia HTML-dokumentista Attribuutit kertovat lisätietoja kustakin elementistä Entiteetit ovat erikoismerkkejä, kuten esimerkiksi ääkköset
HTML: ELEMENTIT Elementit ovat HTML-kielen rakennuspalikoita Elementtejä on kahdenlaisia: Sellaisia, jotka koostuvat ohjausmerkkiparista ja niiden (aloittavan ja lopettavan ohjausmerkin) väliin jäävästä sisällöstä Esimerkiksi tekstikappale <p>tervetuloa!</p> Sellaisia, jotka sijoittavat jotakin sivulle vain yhtä ohjausmerkkiä käyttäen Esimerkiksi rivinvaihto <br />
HTML: ATTRIBUUTIT Attribuutit määrittävät elementtejä täsmällisemmin Esimerkiksi elementti <img /> käyttää attribuuttia src määrittelemään kuvan sijainnin <img src= kuvat/logo.png alt= Logo height= 100 width= 400 /> Elementti <img /> kertoo selaimelle, että sivulle halutaan kuva; attribuutti src kertoo puolestaan halutun kuvan sijainnin ja nimen Muut attribuutit height ja width kertovat, kuinka kuva näytetään (kuvan koko), kun taas attribuutti alt on kuvasta kertova teksti (esimerkiksi tekstipohjaisia selaimia varten)
HTML: ATTRIBUUTIT Attribuutit sisällytetään aloittavan ohjausmerkin sisään: <ohjausmerkki attribuutti= arvo attribuutti= arvo > Kaikki HTML-kielen elementit ja attribuutit listattu HTML-kieltä kehittävän yritysten ja yhteisöjen yhteenliittymän W3C:n kotisivulla: http://www.w3.org/
HTML: ENTITEETIT Entiteetitejä käytetään ASCII-merkistöön (American Standard Code for Information Interchange) kuulumattomien merkkien näyttämiseen WWWsivulla Selain korvaa entiteetin sitä vastaavalla merkillä Entiteetit alkavat &-merkillä ja päättyvät puolipisteeseen Esimerkiksi ä-kirjain kirjoitetaan HTML-dokumenttiin ä
HTML: ENTITEETIT <html> <head> <title>villen kotisivu</title> </head> <body background= kuva.jpg > <p>tämä on Villen kotisivu.</p> </body> </html>
HTML: KOMMENTOINTI HTML-dokumenttiin voi lisätä kommentteja helpottamaan kirjoitetun koodin ymmärtämistä: Kommentti aloitetaan merkkijonolla <!-- ja lopetetaan merkkijonolla --> Esimerkki: <title>villen kotisivu</title> <!-- Teksti näytetään selaimen otsikkopalkissa, kun sivua selataan -->
HTML: TEKSTIN MUOTOILU Tekstiä voi muotoilla body-osiossa käyttämällä erilaisia otsikoita <h1>, <h2>,, <h6> Tekstiä voi jakaa kappaleisiin käyttämällä ohjausmerkkejä <p> ja </p> Rivinvaihto saadaan aikaan ohjausmerkillä <br /> ja horisontaalinen viiva merkillä <hr /> Tekstiä on lisäksi mahdollista muotoilla esimerkiksi erilaisiksi hierarkkisiksi listoiksi ja taulukoiksi Taulukoista ks. esim. http://www.w3schools.com/html/html_tables.asp
HTML: LINKIT Linkit keskeinen osa nettiä: ilman niitä netiltä puuttuisi kokonaan verkkomainen rakenne Linkit voivat viitata sivun ulkoiseen sisältöön Mutta ne mahdollistavat myös siirtymisen yhdeltä sivulta seuraavalle jonkin sivuston sisällä Sekä hyppäämisen johonkin kohtaan yhden sivun sisällä Linkit luovat sivustoon järjestyksen ja rakenteen
HTML: LINKIT Tarvitset linkin luodaksesi: Tiedoston tai sivun URL-osoitteen (http://...) Tekstin kuvaamaan linkkiä (esimerkiksi: Lue lisää ) Elementin <a> ja attribuutin href Esimerkki: <p>lue Oulun <a href= http://www.ouka.fi/kulttuuri/ >kulttuuritarjonnasta</a ></p>
HTML: LINKIT Absoluuttisissa linkeissä käytetään kokonaista URLosoitetta yhdistämään selain WWW-sivuun tai muuhun resurssiin (esim. http://www.oulu.fi/kulttuuri/index.asp) Relatiivissa linkeissä riittää URL-osoitteen lyhentäminen pelkästään esimerkiksi polkuun ja tiedoston nimeen (esim. /kuvat/index.html) Relatiivisia linkkejä käytetään linkeissä, jotka viittaavat saman verkkotunnuksen alla oleviin sivuihin Esim. <p>read more about <a href= me.html >me</a></p>
HTML: LINKIT Esimerkki linkkaamisesta saman sivun sisällä: <html> <head><title>linkit</title></head> <body><h1><a name= top ><a/>otsikko</h1> <p> </p> <p><a href="#top">takaisin ylös</a></p> </body> </html>
HTML: LINKIT Linkin luominen kuvaan: <a href=http://www.oulu.fi/kulttuuri/><img src= http://www.ouka.fi/kulttuuri/images/es_valve_rg b.jpg ></a> Linkin luominen sähköpostiin: <a href= mailto:kayttajatunnus@verkkotunnus.fi >Lähetä meille sähköpostia</a>
KUVIEN KÄYTTÖ NETISSÄ Kuvat voivat olla muun muassa logoja, klikattavia navigointivälineitä tai ne voivat olla osa sisältöä Vain muutamat kuvaformaatit ovat soveltuvia nettikäyttöön Usein kuvaformaatit ovat käyttöjärjestelmä- tai ohjelmistokohtaisia, mutta www-sivun ylläpitäjä ei arvatenkaan voi ennustaa esimerkiksi sivuilla vierailevan käyttöjärjestelmää Kuvien pitää olla mahdollisimman monenlaisten kokoonpanojen käytettävissä
KUVIEN KÄYTTÖ NETISSÄ Kuvien käytössä keskeistä pitää kuvien koko riittävän matalana ja laatu korkeana Saatavilla paljon hyviä ja ilmaisia oppaita kuvien optimointiin: Esim. http://www.yourhtmlsource.com/optimisation/imageopt imisation.html
KUVIEN KÄYTTÖ NETISSÄ Vain nämä kolme kuvaformaattia ovat nettikäyttöön suositeltavia: GIF, JPEG ja PNG GIF-kuvaformaatti soveltuu yksinkertaisiin, vähän värejä ja vähän yksityiskohtia sisältäviin kuviin Älä käytä valokuvissa tai muissa monimutkaisissa kuvissa JPEG-kuvaformaatti soveltuu kuviin, jotka sisältävät miljoonia värejä ja paljon yksityiskohtia PNG-kuvaformaatti soveltuu samoin kuviin, jotka sisältävät miljoonia värejä ja paljon yksityiskohtia
CSS Cascading Style Sheets Tyyliohjeiden laji erityisesti WWW-dokumenteille CSS:llä dokumentille voi määritellä ulkoasun, kuten käytettävät kirjasinlajit, värit jne. CSS:llä annetut säännöt ehdottavat, kuinka dokumentti voitaisiin esittää Eivät ole ehdottomia, vaan ne voi halutessa kiertää Käytännössä CSS:ää käytetään niin, että esimerkiksi HTML-dokumenttiin lisätään viittaus CSSdokumenttiin