TIEDEJUTTUKURSSI FM VILLE SALMINEN

Koko: px

Aloita esitys sivulta:

Download "TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN"

Sanna Virtanen
8 vuotta sitten
Katselukertoja:

1 TIEDEJUTTUKURSSI FM VILLE SALMINEN

2 YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT

3 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

ohjelmat Esimerkiksi Microsoft FrontPage ja Adobe

4 HTML

5 ESIMERKKI OULUN YLIOPISTON MEDICAL HUMANITIES GROUPIN KOTISIVU

6 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ä

Sisältö voidaan esittää monilla eri tavoilla Jokainen WWW-sivu on erilainen, mutta useimmiten

7 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

8 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-sivuja luotaessa on otettava huomioon, että eri selaimilla saattaa olla joitakin erityispiirteitä Yleensä

9 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

mikä vain tietokone voi olla WWW-palvelin Palvelimet ovat kuitenkin yleensä

10 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

jokainen on linkattavissa Linkkaamisessa

11 URL JA SEN KOMPONENTIT protokolla verkkotunnus tai verkkonimi /hutk/historia/ polku index.html tiedoston (resurssin) nimi

12 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

kutsutaan eri ohjausmerkkien erottamia osia HTML-dokumentista Attribuutit kertovat

13 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 />

ohjausmerkin) väliin jäävästä sisällöstä Esimerkiksi tekstikappale <p>tervetuloa!

14 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)

15 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:

HTML-kielen elementit ja attribuutit listattu HTML-kieltä kehittävän

16 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 ä

WWWsivulla Selain korvaa entiteetin sitä vastaavalla merkillä Entiteetit alkavat

17 HTML: ENTITEETIT <html> <head> <title>villen kotisivu</title> </head> <body background= kuva.jpg > <p>tämä on Villen kotisivu.</p> </body> </html>

18 HTML: KOMMENTOINTI HTML-dokumenttiin voi lisätä kommentteja helpottamaan kirjoitetun koodin ymmärtämistä: Kommentti aloitetaan merkkijonolla  Esimerkki: <title>villen kotisivu</title>

-- ja lopetetaan merkkijonolla --> Esimerkki: <title>villen

19 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.

ohjausmerkillä <br /> ja horisontaalinen viiva merkillä <hr /> Tekstiä on lisäksi mahdollista muotoilla

20 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

mahdollistavat myös siirtymisen yhdeltä sivulta seuraavalle jonkin sivuston sisällä

21 HTML: LINKIT Tarvitset linkin luodaksesi: Tiedoston tai sivun URL-osoitteen ( Tekstin kuvaamaan linkkiä (esimerkiksi: Lue lisää ) Elementin <a> ja attribuutin href Esimerkki: <p>lue Oulun <a href= >kulttuuritarjonnasta</a ></p>

22 HTML: LINKIT Absoluuttisissa linkeissä käytetään kokonaista URLosoitetta yhdistämään selain WWW-sivuun tai muuhun resurssiin (esim. 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>

23 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>

24 HTML: LINKIT Linkin luominen kuvaan: <a href= src= b.jpg ></a> Linkin luominen sähköpostiin: <a href= >Lähetä meille sähköpostia</a>

25 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ä

26 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. imisation.html

27 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

28 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

Samankaltaiset tiedostot

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli. HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan