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

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

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

<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

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

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

<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

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

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

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

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

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

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

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

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

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

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

Johdanto HTML-julkaisukieleen tMyn

<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

<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

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

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

<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

Johdanto HTML-julkaisukieleen tMyn

Johdanto HTML-julkaisukieleen tMyn

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

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

Johdanto HTML-julkaisukieleen tMyn

Johdanto HTML-julkaisukieleen tMyn

<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= ”http://www.stockholm.se/”> Tukholma</a>. Linkkiteksti (Tukholma) on siis a-elementin sisältönä. Johdanto HTML-julkaisukieleen tMyn

Johdanto HTML-julkaisukieleen tMyn

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

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 http://. Johdanto HTML-julkaisukieleen tMyn

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 www.koris.example/esittely.html Johdanto HTML-julkaisukieleen tMyn

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 www.koris.example/esittely.html#saannot, esim. <a href=”http://www.koris.example/esittely.html#saannot”> Koriksen säännöt</a>. Tällaista osaa, joka koostuu ristikkomerkistä # ja id-määritteellä määritellystä tunnuksesta kutsutaan fragmentiksi. Johdanto HTML-julkaisukieleen tMyn

Siis samassa hakemistossa oleva sivu Johdanto HTML-julkaisukieleen tMyn

Johdanto HTML-julkaisukieleen tMyn

Johdanto HTML-julkaisukieleen tMyn

Johdanto HTML-julkaisukieleen tMyn

Johdanto HTML-julkaisukieleen tMyn

<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

<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

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

Johdanto HTML-julkaisukieleen tMyn

Johdanto HTML-julkaisukieleen tMyn

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

Johdanto HTML-julkaisukieleen tMyn

Johdanto HTML-julkaisukieleen tMyn

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

Johdanto HTML-julkaisukieleen tMyn

Johdanto HTML-julkaisukieleen tMyn

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

Johdanto HTML-julkaisukieleen tMyn

Johdanto HTML-julkaisukieleen tMyn

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

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

Johdanto HTML-julkaisukieleen tMyn

Johdanto HTML-julkaisukieleen tMyn

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

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-8859-1). Johdanto HTML-julkaisukieleen tMyn

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ä. http://validator.w3.org Johdanto HTML-julkaisukieleen tMyn

Johdanto HTML-julkaisukieleen tMyn

Johdanto HTML-julkaisukieleen tMyn

Johdanto HTML-julkaisukieleen tMyn