HTML5-perusteet

• Dokumenttityypeistä
  • Kuka määrittää miten sivuja tehdään?
  • Standardeista lyhyesti
• WWW-sivujen tekeminen
  • Editorit
  • Rakenteen merkitseminen
  • Ominaisuudet eli attribuutit
  • Dokumentin on oltava hyvin muodostettu
  • Dokumentin pitää olla validi
• HTML5-dokumentin runko
• Erikoismerkkien koodaus
  • Osoitteissa olevat erikoismerkit
  • Linkkejä erikoismerkkien koodaamisesta
• Dokumentin perusrakenne
• HTML5:n elementit
• Lohkotason elementit
  • Otsikkoelementit - (h1 - h6)
  • Tekstikappale - p
• Erilaiset listat
  • Järjestämätön lista - ul
  • Järjestetty lista - ol
  • Sisäkkäiset listat
• Taulukot
  • Taulukkoesimerkki
• Korvattavat elementit
  • img - Kuva
  • br - pakotettu rivinvaihto
• Tekstitason elementit
  • Hyperlinkit - a
• Dokumentin otsikkotietoihin sijoitettavat elementit
  • Linkkielementti - link
  • Metaelementti - meta
• Yleisimmät virheet HTML-dokumentissa
• HTML-dokumentin tuottamisen vaiheet
  • WWW-sivun julkaisu JYU:ssä

Luennolla käsitellään WWW-sivujen kirjoittamista eli opetellaan perusteet HTML5-dokumenttien tuottamisesta. WWW-sivun ulkoasun muotoilu käsitellään myöhemmillä luennoilla.

Dokumenttityypeistä

• Wordin tallentamaa tiedostoa pystyy yleensä tulkitsemaan vain ohjelma itse
• Word tekee tiedostoon merkintöjä
  • Rakenteen merkitsemiseksi
  • Ulkoasun määrittämiseksi
  • Automaattisia kenttiä varten
• Word-dokumentti sisältää myös kuvat ja muut dokumentissa vaadittavat objektit
• WWW-sivua voivat tulkita useat erilaiset selaimet (esim. graafiset selaimet, kännykkäselaimet, ääniselaimet, tekstiselaimet jne.)
  • On oltava yhteisiä pelisääntöjä miten WWW-dokumentteja (HTML-dokumentteja) kirjoitetaan.
  • On keskityttävä sisällön jälkeen rakenteen merkitsemiseen ja vasta sitten ulkoasuun.
• HTML-dokumentti on pelkkää tekstiä
  • Mitä on pelkkä teksti? Jos voit muokata tiedostoasi Notepadilla niin kyseessä on puhdas tekstitiedosto tiedoston päätteestä riippumatta.
    • .htm
    • .html
    • .xhtml
    • .xml
    • .txt
    • .bat
  • Rakenteen merkinnät on kirjoitettava itse
  • Merkintöjen kirjoittamiseen on tarkat säännöt (kielioppi), jonka määrittää dokumenttityyppi
  • Käytä oikeaa merkistöä eli UTF-8
• Käytä myös Unix-tyyppisiä rivinvaihtoja.
• WWW-sivulla olevat kuvat, videot ja muut objektit linkitetään HTML-dokumenttiin
  • Kaikki HTML-dokumenttiin liittyvät objektit (kuvat, videot, css-tiedostot jne.) on muistettava siirtää www-palvelimelle
  • WWW-sivulla näkyvä objekti kuten kuva voi sijaita millä tahansa www-palvelimella
  • Helpointa on tallentaa omaan sivuun liittyvät tiedostot kaikki samaan kansioon varsinaisen html-tiedoston kanssa

Kuka määrittää miten sivuja tehdään?

• W3C ( World Wide Web Consortium )

  W3C tuottaa spesifikaatioita, ohjeita, ohjelmia ja työkaluja WWW-sivujen yms. tuottamiseen. W3C:n jäseniä ovat kaikki suuret selainvalmistajat ja palveluntarjoajat.

Standardeista lyhyesti

• XML (Extensible Markup Language)

  XML on merkintäkieli, joka määrittelee miten kirjoitetaan dokumentteja, jotka ovat sekä ihmisen, että koneen luettavissa. Esim. XHTML on XML-applikaatio/kieli

• HTML (HyperText Markup Language)

  HTML on WWW:ssä käytettävien hypertekstidokumenttien rakenteen määrittelyyn tehty kieli.

• HTML5

  HTML5 on uusin versio HTML-merkintäkielestä

• XHTML (Extensible HyperText Markup Language)

  XHTML on XML:n mukaan määritelty suositus HTML-merkintäkielestä.

• CSS (Cascading Style Sheets)

  CSS on XML-dokumenttien ulkoasun muotoilemiseen käytetty kieli.

WWW-sivujen tekeminen

WWW-sivujen tekemisessä voidaan erottaa samat vaiheet kuin tekstinkäsittelydokumentin tekemisessä. Nämä vaiheet ovat:

• Sisällön tuottaminen
• Rakenteen merkitseminen
• Ulkoasun määrittäminen

Editorit

WWW-sivuja voidaan tuottaa niihin erikoistuneilla ohjelmilla, jotka näyttävät suoraan miltä sivu näyttää selaimessa. Sivuja voidaan tuottaa myös kirjoittamalla suoraan HTML5-merkintäkieltä. HTML5-kielen kirjoittaminen EI ole ohjelmointia.

HTML5-merkintäkieli ei kiinnitä millään tavalla dokumentin ulkoasua vaan ainoastaan dokumentin rakenteen.

Tällä kurssilla editorisuositus on Visual Studio Code (https://code.visualstudio.com/), joka soveltuu erityisen hyvin HTML- ja CSS-tiedostojen muokkaamiseen.

Graafisia WYSIWYG (What You See Is What You Get) -editoreita on syytä välttää jos ei ymmärrä rakenteen ja ulkoasun eroa. WWW-sivujen yhteydessä WYSIWYG on muutenkin harhaanjohtava käsite, koska et voi oikeasti tietää miltä sivusi näyttää missäkin ympäristössä.

• Notepad++
  • Asenna myös XML Tools -plugin
• ConTEXT
• XML-editorit

Rakenteen merkitseminen

HTML5-dokumentti on tekstiä, jossa merkitään dokumentin rakenne elementeillä, jotka kirjoitetaan <>-merkkien väliin. Esim. <title>.

Elementeillä on aina aloitus ja lopetus joiden välissä on varsinainen elementin sisältö. esim.

<title>Web-julkaiseminen</title>

<title> on aloituselementti (tagi).

</title> on lopetuselementti (tagi). Lopetuselementissä on aina /-merkki

Jos elementillä ei ole sisältöä niin lopetuselementti voidaan lyhentää suoraan aloituselementtiin: <br />

Elementtien välillä ja tekstin keskellä saa olla vapaasti välilyöntejä tai rivinvaihtoja.

Tavallisimmista XHTML/HTML5-elementeistä löytyy dokumentti opettelun tueksi.

http://appro.mit.jyu.fi/doc/www/xhtml/

Ominaisuudet eli attribuutit

Elementeillä voi olla ominaisuuksia eli attribuutteja, jotka määrittelevät jotakin elementtiin liittyviä asioita. Esim. hyperlinkin kohde määritellään a-elementtiin tulevalla href-attribuutilla:

<a href="https://www.jyu.fi/">Jyväskylän yliopisto</a>

Attribuutit kirjoitetaan aloituselementin sisään välilyönneillä eroteltuina siten, että ensin kirjoitetaan attribuutin nimi (esim. href) ja sitten =-merkki ja tämän jälkeen lainausmerkkien ("") sisään attribuutille annettava arvo.

Dokumentin on oltava hyvin muodostettu

Tuotetun dokumentin pitää olla hyvin muodostettu (engl. well-formed), ettei selaimien tarvitse tehdä tulkitsemisessa arvailuja. Eri elementit eivät siis saa mennä keskenään ristiin eikä lopetusosia saa unohtaa.

Väärin

<p>Tuotetun <strong>dokumentin pitää olla
 hyvin muodostettu
 (<em>engl. well-formed</em>).</p></strong>
            

Oikein

<p>Tuotetun <strong>dokumentin pitää olla
 hyvin muodostettu
 (<em>engl. well-formed</em>)</strong>.</p>
            

HTML5-standardi katsoo paikoin läpi sormien lopetustagien puuttumista mutta tämän jälkeen dokumentti ei enää ole XML-yhteensopiva. Tällä kurssilla kirjoitamme vain XML-yhteensopivia dokumentteja.

Dokumentin pitää olla validi

Dokumentin pitää olla myös validi (engl. valid) eli sen rakenne pitää olla jonkin dokumenttityypin mukainen. Dokumenttityyppi määrää mitä elementtejä voi käyttää, mitkä elementit saavat sijaita minkäkin elementtien sisällä ja mitä attribuutteja kuuluu millekin elementille jne.

HTML5

Käytämme tällä kurssilla HTML5-dokumenttityyppiä.

HTML5-dokumenttien tarkistamiseen eli validointiin on olemassa HTML-validaattoreita kuten W3C Markup Validation Service.

Pelkillä www-selaimilla testaamiseen ei voi luottaa koska ne yrittävät hiljaisuudessa ohittaa käyttäjän tekemät virheet, jonka tuloksena virheellinen dokumentti toimii kuun asennosta, auringonpilkuista ja käytetystä selaimesta riippuen ehkä joskus tai ei koskaan.

HTML5-dokumentin runko

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml" lang="fi">
<head>
<meta charset="UTF-8" />
<link href="tyyli.css" rel="StyleSheet" type="text/css" />
<title>Sivun otsikko</title>
</head>
<body>
<h1>Otsikko</h1>
<p>...Sivun sisältöä tänne...</p>
</body>
</html>
            

• DOCTYPE-elementti kertoo käytetyn dokumenttityypin mutta HTML5-dokumentissa dokumenttityypin määrittely on tyhjä.
• head-elementti sisältää kaiken dokumenttiin liittyvän metatiedon.
• meta-elementillä varmistetaan dokumentissa käytetty merkistö. Käytä merkistönä vain UTF-8-merkistöä.
• title-elementti sisältää jonkin hyvin dokumenttia kuvaavan otsikon. Otsikon pitää olla järkevä vaikka se otettaisiin erilleen koko dokumentista.
• body-elementti sisältää kaiken varsinaisen WWW-sivulla näkyvän ja dokumentin runkoon kuuluvan informaation.
• h1-elementti on korkeimman otsikkotason elementti. Jokaisella sivulla pitäisi aina olla vain ja ainoastaan yksi h1-elementti, joka kertoo koko dokumentin pääotsikon.
• p-elementti merkitsee tekstikappaleen.

Erikoismerkkien koodaus

• Tekstissä olevat erikoismerkit on koodattava entiteeteillä kaikkialla HTML5-dokumentissa. Entiteetti on merkkijono, joka alkaa &-merkillä ja päättyy puolipisteeseen (;).
  • & &amp;
  • < &lt;
  • > &gt;
  • " &quot;
• Skandinaavisia merkkejä ei tarvitse koodata &auml; ja &ouml; -entiteeteillä, jos käytössä on UTF-8-merkistö.
• HTML5-entiteetit

Osoitteissa olevat erikoismerkit

Osoitteissa eli URLeissa olevat erikoismerkit on koodattava omalla tavallaan. Älä käytä näitä merkkejä omien tiedostojesi tai kansioidesi nimisssä.

Älä koodaa osoitteissa olevia /-merkkejä äläkä osoitteen alkuosaa http://jotain.muuta.palvelin/

Erikoismerkkien koodaamisen voi tehdä valmiilla palvelulla.

Jos lisäät www-dokumenttiisi linkin (a-elementti) tai kuvaviittauksen (img-elementti) tai viittauksen css-tiedostoon (link-elementti) niin osoitteessa olevat edellämainitut erikoismerkit on kirjoitettava koodatussa muodossa.

Esimerkki

Kuvatiedoston nimi on DSCN4283-Hämähäkki.jpg mutta ä-kirjaimet on koodattava seuraavasti:

<p>
<img
  src="DSCN4283-H%E4m%E4h%E4kki.jpg"
  alt="Hämähäkki lämmittelee auringossa rinkan päällä"
  title="Hämähäkki lämmittelee auringossa" />
</p>

Sama pätee tavallisen linkin kohdalla:

Koodattu linkki Koodaamaton linkki

<p>
<a
 href="https://hazor.iki.fi/2002/jotunheimen/tommi/DSCN4283-H%E4m%E4h%E4kki.html">
 Hämähäkki</a>
</p>

Esim. Testilinkki

<a href="http://appro.mit.jyu.fi/t%E4m%E4%20on%20osoite/">Testilinkki</a>

Linkkejä erikoismerkkien koodaamisesta

• Jukka Korpela, "Merkit ja koodaukset".

Dokumentin perusrakenne

Seuraavassa kuvassa on esitettynä dokumentin perusrakenne. Perusrakenteesta kannattaa huomata seuraavat asiat:

Dokumentin rakennetta voi katsella Firefoxissa ja Chromessa Inspectorin avulla. Näppäinyhdistelmä CTRL+SHIFT+C avaa Inspectorin.

• Dokumentissa kuuluu yleensä olla yksi ensimmäisen tason otsikko.
• Otsikkotasojen pitää edetä loogisesti (ensimmäinen taso, jonka alla toinen taso).
• Jokaisen otsikon jälkeen tulisi olla tekstikappale (ei heti toista otsikkoa).

HTML5:n elementit

Seuraavassa kaaviossa pyritään selventämään HTML5-elementtien suhdetta toisiinsa. Kaaviosta puuttuu hyvin paljon elementtejä ja kaavio ei ilmaise täysin elementtien välisiä riippuvuuksia.

Lohkotason elementit

Lohkotason elementtejä voi sijoittaa suoraan body-elementin sisään.

Useimmat lohkotason elementit voivat sisältää joko pelkkää tekstiä tai merkkitason elementtejä.

Otsikkoelementit - (h1 - h6)

Tekstikappale - p

Erilaiset listat

Listat ovat myös lohkotason elementtejä. Listojen sisään voi sijoittaa sekä merkkitason elementtejä että toisia lohkotason elementtejä

Seuraavassa on esimerkkien avulla käsitelty järjestämätön ja järjestetty lista sekä määritelmälista.

Järjestämätön lista - ul

Järjestetty lista - ol

Sisäkkäiset listat

Huom! Listaelementin (ul tai ol) lapsena saa olla VAIN li-elementtejä. Jälkeläisinä (li-elementin sisällä) saa olla taas mitä tahansa li-elementin sisään voi sijoittaa mitä tahansa elementtejä kuten uuden listan.

Ei koskaan seuraavalla tavalla:

<ul>
   <ul>
   </ul>
</ul>

Tässä on oikea tapa:

<ul>
   <li> li-elementti on ainoa elementti, joka voi olla ul-elementin lapsi
       <ul>
         <li>...<li>
       </ul>
   </li> 
</ul>

Esimerkki 1

Kaksitasoinen sisäkkäinen lista. Huom! HTML-koodin sisennyksillä ei ole mitään vaikutusta listan muodostamiseen vaan niitä on käytetty vain havainnollistamiseen.

Esimerkki 2

Kolmetasoinen lista, jossa on sekaisin järjestettyjä (ol) ja järjestämättömiä (ul) listoja

Taulukot

• table-elementti muodostaa taulukon
• tr-elementti aloittaa uuden rivin taulukossa
• th-elementti määrittelee rivi- tai sarakeotsikon
• td-elementti määrittelee taulukon solun

Taulukoita rakennettaessa kannattaa huomata seuraavia asioita:

• Taulukkoon laitetaan ainoastaan taulukkomuodossa olevaa dataa.
• Taulukoilla ei saa taittaa sivua!

Taulukkoesimerkki

Taulukon ulkoasu määritellään css:n avulla. Kts. css-luento.

Korvattavat elementit

Korvattavia elementtejä voidaan sijoittaa lohko- tai tekstitason elementtien sisään.

img - Kuva

• src-attribuutin määrittelemä kuva ilmestyy img-elementin paikalle dokumenttiin.
• alt-attribuutin sisältö korvaa kuvan jos kuvaa ei voida esittää. Alt-attribuutin tarkoitus on korvata kuvan sisältämä informaatio. Esim. jos kuvassa on kaavio niin alt-attribuutissa pitää kuvailla kaavion sisältö.
• title-attribuutti on kuvan otsikko, joka usein näytetään kun hiiri viedään kuvan päälle
• img-elementti pitää sijoittaa aina jonkin lohkotason elementin (p, li, h1, h2 jne) sisään.
• img-elementille ei ole normaalia lopetuselementtiä joten se pitää korvata lisäämällä aivan elementin loppuun välilyönti ja /-merkki.

Seuraavassa esimerkki img-elementin käytöstä.

Käytettävä kuva voi sijaita millä tahansa www-palvelimella jos kuvan osoitteeksi kirjoitetaan kokonainen URI:

<p>
<img src="http://appro.mit.jyu.fi/images/appro2_p.png" alt=" " title="Appro-logo" />
</p>

Useimmiten kuvat sijaitsevat samalla palvelimella ja samassa kansiossa kuin html-dokumenttikin. Tällöin on järkevintä käyttää suhteellista osoitusta kuvaan:

<p>
<img src="appro2.png" alt=" " title="Appro-logo" />
</p>

Kuvalle pitää keksiä korvaava tekstikuvaus alt-attribuutin arvoksi. alt-attribuutin sisältö näytetään jos kuvaa ei pystytä esittämään. Jos kuvalla ei ole sisällöllista merkitystä vaan kyseessä on esim. koriste niin alt-attribuutin arvoksi laittaa yhden välilyönnin alt=" ".

<p>
<img
  src="http://hazor.iki.fi/2002/jotunheimen/tommi/thumbs/DSCN4283-H%E4m%E4h%E4kki.jpg"
  alt="Hämähäkki lämmittelee auringossa rinkan päällä"
  title="Hämähäkki lämmittelee auringossa" />
</p>

br - pakotettu rivinvaihto

• br - pakotettu rivinvaihto. br-elementillä ei saa yrittää tehdä tyhjää tilaa (vrt. ylimääräiset rivinvaihdot tekstinkäsittelyssä).

  <address>
  yliopistonopettaja <a href="mailto:tommi.j.lahtonen@jyu.fi">Tommi Lahtonen</a><br />
  Sähköposti: <a href="mailto:tommi.j.lahtonen@jyu.fi">tommi.j.lahtonen@jyu.fi</a><br />
  Kotisivu: <URL: <a href="http://hazor.iki.fi/">http://hazor.iki.fi/</a>><br />
  Työhuone: AgC431.2<br />
  Puhelin: (014) 260 2746<br />
  Fax: (014) 260 2731</address>

• br-elementillä ei myöskään ole normaalia lopetuselementtiä vaan se korvataan laittamalla aivan elementin loppuun välilyönti ja /-merkki. vrt. img.

Tekstitason elementit

Seuraavaan on kerätty listaksi tekstitason elementit.

Hyperlinkit - a

a-elementillä voidaan toteuttaa hyperlinkki joko toiseen dokumenttiin, saman dokumentin toiseen kohtaan tai mihin tahansa www:ssä sijaitsevaan objektiin. Linkkinä voi toimia teksti tai kuva. a-elementti pitää sijoittaa jonkun lohkotason elementin sisälle.

Huom! Älä yritä pakottaa linkkejä aukeamaan uuteen ikkunaan. Sivun lukija päättää itse minkä linkin haluaa avata uuteen tabiin tai ikkunaan.

Lisätietoa: Creating hyperlinks

• <a href="http://foo.example/testi/kuva.png">kuva</a> Linkki toisella palvelimella olevaan kuvatiedostoon
• <a href="http://foo.example/gradu.pdf">gradu</a> Linkki toisella palvelimella olevaan dokumenttiin
• <a href="http://foo.example/gradu.pdf"><img src="kuva.png" alt="linkkinä toimiva kuva" /></a> Linkki toisella palvelimella olevaan dokumenttiin. Linkkitekstin sijaan linkkinä toimiikin kuva

Katso Esimerkkejä erilaisista viittauksista

Harjoittele suhteellisia viittauksia

• Absoluuttisella osoitteella oleva linkki

  kurssin kotisivulle:

  <p>Absoluuttisella osoitteella oleva linkki kurssin
  <a title="web-julkaiseminen kurssin kotisivu"
  href="http://appro.mit.jyu.fi/itkp1011/">kotisivulle</a></p>

  Absoluuttinen osoite sisältää aina koko osoitteen ja toimii kaikkialla. Osoitteesta ei voi jättää pois http-alkua tai muita osia.

• Puoliabsoluuttisella osoitteella oleva linkki

  kurssin toiselle luennolle:

  <p>Puoliabsoluuttisella osoitteella oleva linkki kurssin
  
  <a href="http://appro.mit.jyu.fi/www/luennot/luento2/">toiselle luennolle</a></p>

  Puoliabsoluuttisessa osoitteessa viitataan kyseisen palvelimen sisällä lukien palvelimen juuresta (/). Osoitteen alussa oleva http://foobar.osoite.example osa jätetään siis pois.

• Suhteellisella osoitteella oleva linkki

  kurssin ensimmäisiin ohjaustehtäviin:

  <p>Suhteellisella osoitteella oleva linkki kurssin
  <a href="../../ohjaus/ohjaus1/">ensimmäisiin ohjaustehtäviin</a></p>

  Suhteellisella viittauksella voit viitata mihin tahansa oman hakemistorakenteen tiedostoon. Suhteellinen viittaus ratkaistaan sen osoitteen mukaan, jossa kyseinen viittaus esiintyy. Vrt. komentorivin oletushakemisto:

  • <a href="#">Sama sivu</a> Linkki sivuun itseensä
  • <a href="./">Sama kansio</a> Linkki samaan kansioon
  • <a href="muuli.html">muuli</a> Tämän hakemiston muuli.html-tiedosto (hakemisto, missä viittaava dokumentti sijaitsee)
  • <a href="testi/">testi</a> Tämän hakemiston alihakemisto testi (oletuksena näytetään sivu index.html)
  • <a href="testi/muuli.html">muuli</a> Tämän hakemiston testi-alihakemiston muuli.html-tiedosto
  • <a href="testi/kuva.png">kuva</a> Viite testi-alihakemiston kuva.png-tiedostoon (kuvat kannattaa säilyttää dokumentin kanssa samassa hakemistossa)
  • <a href=""../">Isäkansio</a> Isähakemisto (hakemisto, jossa nykyinen hakemisto sijaitsee)
  • <a href="../testi/">testi</a> Isähakemiston alihakemisto testi
  • <img src="kuva.jpg" alt="mallikuva" />

  Absoluuttista ja suhteellista viittausta käsitellään lisää kurssin komentoriviluennolla.

• Dokumentin sisäinen linkki

  tämän dokumentin hyperlinkeistä kertovaan lukuun Hyperlinkit - a

  <p>Linkki tämän dokumentin hyperlinkeistä kertovaan lukuun
  <a href="#hyper">Hyperlinkit - a</a></p>

  Otsikkoon, jonne dokumentin sisäinen linkki osoittaa, täytyy olla määriteltynä id-attribuutilla yksikäsitteinen arvo.

  <h3 id="hyper">Hyperlinkit - a</h3>
                  

• strong - erittäin tärkeät asiat
• em - tärkeät asiat

  Tässä on pitkä kappale tekstiä jossa jotkin sanat ovat tärkeitä, toiset sanat ovat erittäin tärkeitä.

  <p>
  Tässä on pitkä kappale tekstiä jossa jotkin sanat ovat <em>tärkeitä</em>, toiset
  sanat ovat <strong>erittäin tärkeitä</strong>.
  </p>

Dokumentin otsikkotietoihin sijoitettavat elementit

Linkkielementti - link

• link-elementti saa esiintyä vain head-elementin sisällä.
• link-elementille määritellään dokumentin suhde muihin dokumentteihin

<link
  rel="StyleSheet"
  href="http://appro.mit.jyu.fi/appro2003.css"
  type="text/css"
/>

Metaelementti - meta

• metaelementti saa esiintyä vain head-elementin sisällä.
• metaelementillä määritellään dokumenttiin liittyvää metatietoa

<meta 
    charset="UTF-8"
/>

Yleisimmät virheet HTML-dokumentissa

• Elementit väärässä järjestyksessä.
• Lohkotason elementti tekstitason elementin sisällä.
• Väärin kirjoitettu dokumenttityyppi.
• Attribuuttien arvot ilman lainausmerkkejä.
• Elementtien ja attribuuttien nimet pitää kirjoittaa pienellä.
• Epätyhjät elementit pitää lopettaa lopetuselementillä <p> .. </p>
• Tyhjät elementit pitää lopettaa kauttaviivalla <img .. />

HTML-dokumentin tuottamisen vaiheet

1. Kirjoita dokumentin sisältö
2. Määrittele dokumentin rakenne
3. Siirrä dokumentti WWW-palvelimelle
4. Validoi dokumentti
   • Virallinen validaattori löytyy osoitteesta http://validator.w3.org/
5. Testaa dokumentti jollakin selaimella
6. Määrittele dokumentin ulkoasu (CSS)
7. Validoi CSS
8. Testaa ulkoasu selaimilla

WWW-sivun julkaisu JYU:ssä

Voit julkaista sivusi tallentamalla sen W:-asemalle. Jos W:-asemaa ei ole suoraan käytettävissä joudut toimimaan digipalvelujen ohjeen mukaan.

Sivusi löytyy osoitteesta http://users.jyu.fi/~omatunnus/kansio/tiedoston_nimi