Johdanto HTML-julkaisukieleen

Esitys aiheesta: "Johdanto HTML-julkaisukieleen"— Esityksen transkriptio:

1 Johdanto HTML-julkaisukieleen
HTML-kielisen web-sivun tekoon on olemassa hyvin monia ohjelmia. Erityiset sivunteko-ohjelmat ovat sellaisia, joita voi käyttää tekstinkäsittelyohjelman tapaan niin, että sivu koko ajan näkyy sentapaisena kuin selain sen näyttää. Tästä käytetään nimitystä näköisnäyttö, WYSIWYG. Johdanto HTML-julkaisukieleen tMyn

2 Tässä opintojaksossa käytetään Crimson Editor freeware tekstieditoria.
Ammattikäytössä suosittuja näköisnäyttöohjelmia ovat vaikkapa Microsoft Office SharePoint Designer (ent. FrontPage), Microsoft Expression -tuotteet ja Adobe Dreamweaver. Toisessa ääripäässä työkaluvalikoimassa lienee esim. Microsoftin Muistio-ohjelma. Tässä opintojaksossa käytetään Crimson Editor freeware tekstieditoria. Johdanto HTML-julkaisukieleen tMyn

3 HTML on eräs rakenteinen dokumenttien muoto, joka on käsiteltävissä mitä erilaisimmissa tilanteissa, kuten näytettävissä isolla ja pienellä kuvaruudulla, tulostettavissa paperille, esitettävissä ääneen jne. Sana rakenteinen tarkoittaa sitä, että HTML-dokumentti sisältää tekstisisällön lisäksi sen loogisen rakenteen osoittavaa merkkausta. Itse HTML-dokumentin sisältö on eräin poikkeuksin vain tekstiä, ei esimerkiksi kuvia tai ääniä. Se voi kuitenkin sisältää viittauksia monentyyppisiin dokumentteihin niin, että HTML-dokumentin esitysmuodossa saattaa olla myös mukana vaikkapa kuvia. Johdanto HTML-julkaisukieleen tMyn

4 <h2>Johdannon <em>keskeiset</em>osat</h2>
HTML:ssä kerrotaan tätä varten kuvatiedoston osoite ja ainakin jotakin tietoa kuvan sijainnista suhteessa tekstiin. HTML:n peruskäsitteitä on elementti, joka koostuu alkutagista, sisällöstä ja lopputagista: <h2>Johdannon <em>keskeiset</em>osat</h2> Elementtejä voi siis olla sisäkkäin. Se on olennaista eikä vain erikoinen poikkeus. Johdanto HTML-julkaisukieleen tMyn

5 Ne elementit, joita voidaan käyttää dokumentin varsinaisessa sisällössä, rungossa, jaetaan kahteen pääryhmään: 1. Lohkoelementit (block elements), jotka ovat suurehkoja rakenneosia, kuten tekstikappaleita tai taulukoita ja joiden esitysasu on normaalisti suorakulmion muotoinen. Esitys siis alkaa uudelta riviltä ja myös päättyy rivinvaihtoon. 2. Sisäelementit eli tekstitason elementit (inline elements, text-level elements), jotka yleensä sisältävät lyhyehköjä tekstinpätkiä, kuten korostettuja sanoja kappaleen sisällä. Johdanto HTML-julkaisukieleen tMyn

6 Sisäelementtejä ovat myös kuvat (img-elementit).
Lohkoelementit voivat – monin rajoituksin – sisältää muita lohkoelementtejä ja sisäelementtejä; sisäelementit puolestaan voivat eräin ehdoin sisältää muita sisäelementtejä, mutta eivät lohkoelementtejä. Lohkoelementtejä ovat aakkosjärjestyksessä vaikkapa address, blockquote, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, noscript, ol, p, table ja ul. Sivun runko muodostetaan yleensä otsikkoelementeistä (h1, h2 jne), kappaleista (p), listoista (ul, ol, dl) ja taulukoista (table) ja muita lohkoelementtejä käytetään rakenteen täydentämiseen. Sisäelementtejä ovat myös kuvat (img-elementit). Johdanto HTML-julkaisukieleen tMyn

7 <img alt=”” src=”kukka.jpg”>
Elementtiin voi liittyä yksi tai useampi määrite (attribute), joka tarkentaa elementin merkitystä. Määritteet kirjoitetaan elementin alkutagin sisään, ja ne erotetaan elementin nimestä ja toisistaan välilyönneillä tai rivinvaihdolla: <img alt=”” src=”kukka.jpg”> Määrite koostuu määritteen nimestä (esim. alt tai src), yhtäläisyysmerkistä ja määritteen arvosta, joka on lainausmerkkien sisällä. Johdanto HTML-julkaisukieleen tMyn

8 Mikään niistä ei ole pakollinen, mutta niille löytyy paljon käyttöä.
Eräitä määritteitä voidaan liittää moniin elementteihin ja ne ovat merkitykseltään yleisluonteisia: class, id, lang ja title. Mikään niistä ei ole pakollinen, mutta niille löytyy paljon käyttöä. Elementin luokitteleminen: class Määrite class=”nimi” liittää elementtiin tiedon siitä, että elementti kuuluu nimettyyn luokkaan. Luokat eivät ole mitään ennalta määriteltyjä, vaan sivuntekijä voi ottaa käyttöönsä mitä luokkien nimiä haluaa ja muutenkin tehdä luokituksen haluamallaan tavalla. Johdanto HTML-julkaisukieleen tMyn

9 Luokat ovat käyttökelpoisia etenkin tyylisäännöstöjen yhteydessä.
Esim: Halutaan, että jokin kappale näkyy selaimella punaisen reunuksen sisällä. Tätä varten liitetään p-elementtiin tyylisääntö. Punainen reunus koskee vain yhtä kappaletta, siispä otetaan käyttöön luokka ”varoitus”, ja määritellään p-elementin kuuluvan siihen luokkaan. Tyylisäännöstössä käytetään pelkän elementin nimen ”p” asemesta rakennetta ”p.varoitus”, joka tarkoittaa niitä p-elementtejä, jotka kuuluvat varoitus-luokkaan. Johdanto HTML-julkaisukieleen tMyn

10 Tällöin HTML-dokumentti sisältää rakenteen:
<p class=”varoitus”>Varoitus: Sivun lopussa paljastetaan elokuvan loppuratkaisu!</p> Dokumenttiin liittyvä tyylisäännöstö puolestaan sisältää: p.varoitus { border: solid red 0.1em; padding: 0.3em;} Johdanto HTML-julkaisukieleen tMyn

11 Suomen kielen koodi on ”fi”, ruotsin ”sv” ja englannin ”en”.
Elementin kieli: lang Määrite lang=”kielitunnus” ilmoittaa, että elementin sisällön ja määritteiden kieli on se, jonka kielitunnus ilmoittaa. Suomen kielen koodi on ”fi”, ruotsin ”sv” ja englannin ”en”. Johdanto HTML-julkaisukieleen tMyn

12 HTML-tiedostossa rivi saa olla miten pitkä vain.
Toisaalta rivin voi katkaista mistä tahansa kohdasta, missä on sanojen väli. Dokumentin näkyvä esitys selainikkunassa on tästä riippumaton; selain sovittaa sen kulloisenkin selainikkunan leveyteen. Tästä seuraa, että yksittäistä sanaa ei pidä jakaa eri riveille. HTML-tiedosto sisältää sivun tekstisisällön lisäksi merkkausta. Johdanto HTML-julkaisukieleen tMyn

13 Yleinen ryhmittely: div ja span
Näitä elementtejä käytetään ”kääreinä”, joilla voidaan haluttu dokumentin osa muodostaa kokonaisuudeksi. div on lohkotason yleiselementti, span sisätason yleiselementti. span-elementti saa sisältää vain tekstiä ja sisäelementtejä. Johdanto HTML-julkaisukieleen tMyn

14 Selain jättää kommentit huomioimatta.
HTML-dokumenttiin voidaan kirjoittaa kommentteja aloittamalla ne merkeillä <!-- ja lopettamalla ne merkeillä --> siten, että välissä ei ole kahden peräkkäisen yhdysmerkin esiintymää. Selain jättää kommentit huomioimatta. Johdanto HTML-julkaisukieleen tMyn

15 Suositeltava tapa on, että kaikki tekstisisältö on jonkin merkkauksen sisällä, esim. tekstin kappale alkaa merkkauksella <p> ja loppuu merkkauksella </p>. Seuraavassa kuvataan muutama aivan keskeinen merkkaus, joita sivuilla tarvitaan. Johdanto HTML-julkaisukieleen tMyn

16 Ulkoinen otsikko: title
<title>Sivun ulkoinen otsikko</title> Yllä olevan kaltainen rakenne kuuluu jokaisen sivun alkuun. Sivun ulkoinen otsikko ei tule näkyviin osana itse sivua, mutta selaimet ja muut ohjelmat käyttävät sitä moniin tarkoituksiin. Ulkoinen otsikko näkyy usein selainikkunan yläpalkissa, ja usein se tulostuu paperitulosteen arkin alareunaan. Johdanto HTML-julkaisukieleen tMyn

17 Yleensä hakukoneet käyttävät sitä, kun esittävät hakutuloksia. Esim.
<title>Kahvinjuonnin lyhyt historia (sodanjälkeinen Suomi)</title> Johdanto HTML-julkaisukieleen tMyn

18 Johdanto HTML-julkaisukieleen
tMyn

19 <h1>Sivun oma pääotsikko</h1>
Pääotsikko ei ole pakollinen, mutta yleensä tarpeellinen. Sen on hyvä olla lyhyehkö. Esim. <h1>Kahvin historia</h1> Kirjain h tulee englannin sanasta heading. Johdanto HTML-julkaisukieleen tMyn

20 <p>Kappaleen teksti.</p>
Kappale: p <p>Kappaleen teksti.</p> Varsinainen tekstisisältö kirjoitetaan kappaleiksi. Ensimmäisen kappaleen tulisi tiivistää koko sivun olennaisimman sisällön. Kirjain p tulee sanasta paragraph. Johdanto HTML-julkaisukieleen tMyn

21 Teksti-tai muu lohko: div <div>Tekstiä.</div>
Sellainen tekstikokonaisuus, joka ei muodosta kappaletta, siis esim. päiväys tai allekirjoitus, voidaan kirjoittaa div-rakenteeksi. Nimi div tulee sanasta division. Esim. <div>Kirjoitettu 19. joulukuuta 1957.</div> Johdanto HTML-julkaisukieleen tMyn

22 Pitkän sivun voi jakaa osiin väliotsikoilla.
Väliotsikot: h2, h3, h4, h5, h6 Pitkän sivun voi jakaa osiin väliotsikoilla. Parhaimmillaan väliotsikot antavat nopeasti yleiskuvan sisällöstä. Johdanto HTML-julkaisukieleen tMyn

23 <em>tärkeä</em>
Korostus: em ja strong <em>tärkeä</em> <strong>vielä tärkeämpi</strong> Kappaleen sisällä voi korostaa sanoja ja sanayhdistelmiä joko em-merkkauksella tai strong-merkkauksella. Merkkaus em tulee sanasta emphasis. Tyypilliset näkyvät esitysasut ovat sellaiset, että em-rakenne on kursiivia ja strong-rakenne lihavaa. Johdanto HTML-julkaisukieleen tMyn

24 Johdanto HTML-julkaisukieleen
tMyn

25 Johdanto HTML-julkaisukieleen
tMyn

26 Luetelmat: ul, ol, li <ul>
<li>ensimmäinen kohta</li> <li>toinen kohta</li> … <li>viimeinen kohta</li> </ul> Luetelma eli lista voidaan rakentaa käyttämällä ul-rakennetta, jonka sisällä on li-rakenteilla muodostettuja luetelman kohtia. Johdanto HTML-julkaisukieleen tMyn

27 Luetelma on tällöin numeroimaton.
Selaimet yleensä esittävät luetelman niin, että kunkin listan alussa on ”pallukka”. Luetelmasta voidaan tehdä myös numeroitu. Rakenne on muuten sama, mutta ul:n tilalla on ol. Nimien selitykset: ul= unordered list, ol= ordered list ja li=list item. Johdanto HTML-julkaisukieleen tMyn

28 Johdanto HTML-julkaisukieleen
tMyn

29 Johdanto HTML-julkaisukieleen
tMyn

30 <a href=”kohdeosoite”>linkkiteksti</a>
Linkki: a <a href=”kohdeosoite”>linkkiteksti</a> Linkki merkitsee viittausta toiseen sivuun tai sivun kohtaan. Esim. Ruotsin pääkaupunki on <a href= ” Tukholma</a>. Linkkiteksti (Tukholma) on siis a-elementin sisältönä. Johdanto HTML-julkaisukieleen tMyn

31 Johdanto HTML-julkaisukieleen
tMyn

32 Se, mihin linkki viittaa, ilmoitetaan määritteellä eli attribuutilla href=”http://www.stockholm.se/”
Määrite koostuu määritteen nimestä (tässä href), yhtäläisyysmerkistä ja lainausmerkeissä olevasta määritteen arvosta, joka tässä tapauksessa ilmoittaa osoitteen, johon linkki viittaa. Tavallisin linkkien esitystapa on sellainen, että selain esittää linkkitekstin alleviivattuna ja että väri on sininen tai violetti sen mukaan, onko linkki käyttäjälle uusi vai vanha. Johdanto HTML-julkaisukieleen tMyn

33 Osoite voi olla absoluuttinen tai suhteellinen.
Edellä olevassa esimerkissä osoite oli absoluuttinen. Suhteellinen osoite toimii seuraavasti: Sivulla voi viitata samassa hakemistossa olevaan sivuun pelkällä tiedoston nimellä, kuten lisaa.html. Alihakemistossa olevaan sivuun voi viitata rakenteella, jossa on hakemiston nimi, vinoviiva ja tiedoston nimi, esim. arkisto/lisaa.html. Ylemmässä hakemistossa olevaan sivuun voi viitata rakenteella, jossa tiedoston nimeä edeltää ../, esim. ../index.html. Toisessa sivustossa olevaan sivuun viitataan täydellisellä, absoluuttisella osoitteella, joka siis alkaa Johdanto HTML-julkaisukieleen tMyn

34 Oletetaan, että jollakin sivulla on elementti:
Linkki voi viitata paitsi johonkin sivuun kokonaisuutena myös sivun erityiseen kohtaan. Kohta voi olla samalla tai eri sivulla kuin linkki. Käytännössä viittauksen tekee mahdolliseksi id-määrite. Se voidaan liittää mihin tahansa sivun runko-osan elementtiin. Oletetaan, että jollakin sivulla on elementti: <h3 id=”saannot”>Koriksen säännöt</h3> Ja että sivun osoite on Johdanto HTML-julkaisukieleen tMyn

35 Tällöin Saman sivun sisällä voi kyseiseen kohtaan viitata URL:lla #saannot Samassa hakemistossa olevalla sivulla voi viitata kyseiseen kohtaan URL:lla esittely.html#saannot Millä tahansa sivulla voi viitata siihen URL:lla esim. <a href=” Koriksen säännöt</a>. Tällaista osaa, joka koostuu ristikkomerkistä # ja id-määritteellä määritellystä tunnuksesta kutsutaan fragmentiksi. Johdanto HTML-julkaisukieleen tMyn

36 Siis samassa hakemistossa oleva sivu
Johdanto HTML-julkaisukieleen tMyn

37 Johdanto HTML-julkaisukieleen
tMyn

38 Johdanto HTML-julkaisukieleen
tMyn

39 Johdanto HTML-julkaisukieleen
tMyn

40 Johdanto HTML-julkaisukieleen
tMyn

41 <img alt=”korviketeksti” src=”kuvatiedosto”>
Kuva: img <img alt=”korviketeksti” src=”kuvatiedosto”> Sivuun voidaan liittää osaksi kuva img-rakenteella, jossa on kaksi määritettä: src-määrite kertoo kuvatiedoston osoitteen, ja alt-määrite kertoo vaihtoehto- eli korviketekstin. Tavallisesti src-määrite viittaa kuvatiedostoon pelkällä tiedoston nimellä. Korviketeksti (alt-teksti) on se, jonka halutaan esiintyvän kuvan tilalla silloin, kun selain ei esitä kuvaa. Johdanto HTML-julkaisukieleen tMyn

42 <div><img alt=”” src=”kukka.jpg”></div>
nimi img tulee sanasta image ja alt sanasta alternate ja src sanasta source. Jos kuvan halutaan esiintyvän itsenäisenä, kappaleiden ulkopuolella, se voidaan kirjoittaa div-rakenteen sisään – sellaisessa tapauksessa alt-teksti voi olla tyhjä: <div><img alt=”” src=”kukka.jpg”></div> Kuva voidaan myös liittää osaksi tekstikappaletta, jossa on tekstiä: <p><img alt=”korviketeksti” src=”kuvatiedosto” align=”right”> Kappaleen tekstiosuus.</p> Johdanto HTML-julkaisukieleen tMyn

43 Kokeillaan aluksi vaihtoehtoa, jossa kuva on kappaleen vasemmalla puolella:
Johdanto HTML-julkaisukieleen tMyn

44 Johdanto HTML-julkaisukieleen
tMyn

45 Johdanto HTML-julkaisukieleen
tMyn

46 Seuraavaksi kuva on kappaleen oikealla puolella:
Johdanto HTML-julkaisukieleen tMyn

47 Johdanto HTML-julkaisukieleen
tMyn

48 Johdanto HTML-julkaisukieleen
tMyn

49 Kuva voi myös olla keskellä tekstiä (bottom, middle, top).
Lopuksi kuva ennen tekstiä, ei siis kuvan rinnalla: Johdanto HTML-julkaisukieleen tMyn

50 Johdanto HTML-julkaisukieleen
tMyn

51 Johdanto HTML-julkaisukieleen
tMyn

52 Editorilta katsottuna sisältö näyttää seuraavalta:
Kokeillaan edellä kuvatuilla eväillä tehdä yksi kuvitteellinen sivu – nyt mukana on monia edellä käsiteltyjä elementtejä. Editorilta katsottuna sisältö näyttää seuraavalta: Johdanto HTML-julkaisukieleen tMyn

53 Johdanto HTML-julkaisukieleen
tMyn

54 Johdanto HTML-julkaisukieleen
tMyn

55 Aiheen vaihto tai vaakaviiva: hr, horizontal rule
Hr-elementin looginen merkitys on aihepiirin vaihtaminen, esim. siirtyminen itse dokumentista sitä koskeviin tietoihin tai kokonaan uuteen sisältöaiheeseen dokumentin sisällä. Johdanto HTML-julkaisukieleen tMyn

56 Viralliset kuviot Vaikka edellä esitetty sivun rakenne merkkauksineen on täysin toimiva, on kuitenkin hyvä täydentää sitä eräillä lisäyksillä: Johdanto HTML-julkaisukieleen tMyn

57 Johdanto HTML-julkaisukieleen
tMyn

58 Johdanto HTML-julkaisukieleen
tMyn

59 Alussa olevalla doctype-määrittelyllä eli dokumenttityypin määrittelyllä on kaksi merkitystä:
1. Se helpottaa sivun merkkauksen tarkistamista erityisillä tarkistusohjelmilla, validaattoreilla. 2. Se vaikuttaa joihinkin selaimiin niin, että ne toimivat paremmin HTML-standardin mukaisesti. Sitä seuraava rivi aloittaa varsinaisen HTML-dokumentin, joka on muodoltaan yksi elementti, html-elementti (siis elementti, jonka aloittaa <html>-tagi), jonka sisällä on kaksi osaa, otsikko-osa eli head-elementti ja runko-osa eli body-elementti. Johdanto HTML-julkaisukieleen tMyn

60 Otsikko-osaan kirjoitetaan title-elementti.
Lisäksi siinä voi olla eräitä muita elementtejä, jotka eivät ole sivun varsinaista sisältöä vaan eri tavoin kuvailevat sitä tai liittyvät siihen. Nämä elementit ovat: base, isindex, link, meta, script ja style. meta-elementti ilmoittaa dokumentissa käytetyn merkkikoodin (esimerkissä iso ). Johdanto HTML-julkaisukieleen tMyn

61 Otetaan nuo viralliset osat mukaan aiempaan esimerkkikoodiin, ja käydään sitten kokeilemassa mitä jokin toimiva validaattori siitä kommentoi. Validointi koskee kielen muotosääntöjä (syntaksia), joka on tarkoin ja yksikäsitteisesti kuvattu SGML-kielellä (Standard Generalized Markup Language) ns. DTD:ssä (Document Type Definition). Validoinnin merkitys on siinä, että se auttaa havaitsemaan vahingossa tehtyjä kirjoitusvirheitä. Johdanto HTML-julkaisukieleen tMyn

62 Johdanto HTML-julkaisukieleen
tMyn

63 Johdanto HTML-julkaisukieleen
tMyn

64 Johdanto HTML-julkaisukieleen
tMyn