HTML-opas v.10.11.1997

KOODIRUNKO



up.gif SISÄLLYSLUETTELOON

PIENIN HTML-TIEDOSTO

  • Tulos tuolla koodilla tehdystä tiedostosta. ( Takaisin tälle sivulle Back "painikkeella" )
  • Sivu on tyhjä, koska <BODY> - tagien välissä ei ole informaatiota. (vartalo puuttuu)
  • "Ripaan" tulee tiedoston nimi ( html-esimerkki1.html ) kun <TITLE> - tagien välissä ei ole informaatiota. (otsikko puuttuu)
  • Ei ole merkistystä - onko koodit tiedostossa peräkkäin tai noin allekkain kuin esimerkissä.
    Esimerkiksi: <HTML><HEAD><TITLE></TITLE></HEAD><BODY></BODY></HTML>
  • Ei ole merkistystä - onko koodit kirjoitettu isoilla vai pienillä kirjaimilla. Esimerkiksi:<html><head><title></title></head><body></body></html>
  • Sananvälejä ja sarkaimia saa kaäyttää reilusti.


    up.gif SISÄLLYSLUETTELOON

    LISÄNÄ TIEDOSTON TITTELI JA VARTALOA

  • Tulos tuolla koodilla tehdystä tiedostosta. ( Takaisin tälle sivulle Back "painikkeella" )
  • Selailuohjelman ripaan tulee <TITLE> - tagien välissä oleva teksti: "Sivun nimi".
  • Tällä koodilla on sisältö (vartalo), koska <BODY> - tagien välissä on otsikko ja tekstiä.
  • &auml; = koodilla merkitty ääkkönen (erikoismerkki). Ei välttämätön käyttää!


    up.gif SISÄLLYSLUETTELOON

    SELITYKSIÄ KOODISTA:

    <HTML>
    tiedosto alkaa. (tätä ennen ei pidä olla mitään)
    <HEAD>
    tiedoston tiedot alkavat tästä. (heti <HTML>-tagin jälkeen)
    <TITLE>
    sivun nimi alkaa. (nimi näkyy selari-ohjelman otsarivassa)
    </TITLE>
    sivun nimi päättyy.
    </HEAD>
    tiedoston tiedot päättyvät tähän.
    <BODY>
    näkyvä dokumentin sisältö alkaa. (vartalo)
    <H1>
    aloittaa otsikon
    </H1>
    päättää otsikon
    </BODY>
    näkyvä dokumentin sisältö (vartalo) päättyy.
    </HTML>
    tiedosto päättyy (tämän jälkeen ei pidä olla mitään)

    < = tag:in eli komennon aloitusmerkki (sulkumerkki)
    > = tag:in eli komennon lopetus-, päättymismerkki (sulkumerkki)
    / = lopetus-, päättämistagin tunniste (kauttaviiva)


    <HEAD> ja </HEAD> Tagien väliin tulee tietoa dokumentista.

    Tiedot sisältävät yleensä ohjeita / tietoja selailuohjelmalle.
    Esim:

    TITLE = Dokumentin kuvaava nimi ( ei tarkoita tiedoston nimeä )
    Jos tämä jätetään määrittämättä, niin kuvaavaksi nimeksi tulee html-tiedoston nimi.

    BASE = Kuvaa tiedoston sijaintipaikan. <BASE HREF="URL">
    Eli voi "huijata" ohjelman luulemaan että tiedosto onkin jossain muualla kuin mistä se on ladattu ruudulle.

    ISINDEX = Liittyy tietokantahakuun ja vaatii palvelimelta ohjelman jotta ominaisuutta voitaisiin käyttää.
    Lisää dokumenttiin laatikon johon voi kirjoittaa hakusanan.
    Määreellä prompt="kehoteteksti:" voi vaikuttaa tulevaan kehoitetekstiin.

    META = Omia otsikkotietoja ja ohjelmatulosteita.
    Parametrejä: http-equiv="otsikkokenttä" name="tiedon nimi" content="tieto"
    Esim:
    <meta name="tekijä" content="Matti Meikäläinen">
    <meta http-equiv="Location" content="Finland">
    <meta http-equiv="refresh" content="4;url=xxx.html">

    LINK = ?


    up.gif SISÄLLYSLUETTELOON

    YLEISTÄ

  • Selailuohjelma (browser/selain/lukuohjelma) rakentaa sivun html-dokumentissa annettujen (ohjelman ymmärtämien) tag:ien mukaan.

  • HTML:n perussyntaksi ja semantiikka on määritelty HTML-standardissa joka on saatavilla WWW-konsortion (World Wide Wep Consortium, W3C) alaisuudessa toimivan organisaation kotisivun kautta http://www.w3.org/, josta löytyy myös muut Webbiin liittyvät standardit että ehdotukset (draft).

  • Katsojan käytössä olevalla näytöllä (9"-21"), siinä ajettavalla resoluutiolla (tarkkuudella), värimäärällä (mustavalkoisesta - Miljooniin värisävyihin) ja selailuohjelman ikkunan koolla on merkitystä miten selailuohjelma rakentaa sivun.

  • Myös käyttäjän Internet-linjayhteydellä on merkitystä sivun rakentumiseen selailuohjelmassa. (suuret kuvat ja sivut latautuvat hitaammin hitaalla linjalla "jos lainkaan".)

  • HTML tunnistaa vain yhden tekstinkäsittelyohjelmalla tehdyn sananvälin.
    - lisäsäsananvälit merkkikoodilla &nbsp; tai käyttämällä <PRE> tag:ia.

  • HTML ei tunnista tekstinkäsittelyohjelman rivinvaihtoja, kappaleita ja sarakeladontaa, vaan ne pitää tehdä tag:eilla. ( <BR>, <P>, <TABLE>, yms. )
    - Eli kirjoitettaessa html-dokumenttia voi käyttää vaikka kuinka paljon tekstinkäsittelyohjelman sananvälejä ja rivinvaihtoja, koska ne eivät näy selarissa ja näin saa selvennettyä koodidokumenttia.

  • Kaikki tag:it eivät vaadi lopetus tag:ia. ( <BR>, <P>, <HR>, <LI>, yms.)

  • Lukuohjelma ei huomioi sille tuntemattomia tag:eja sivua rakentaessaan ruudulle.
    - Lähinnä uusimmat- ja joidenkin omat html-laajennukset vanhemmilla lukuohjelmilla ja esimerkiksi JAVA:a, taulukoita, tyylejä, alleviivausta, keskitystä, tekstinvärjäystä yms. tukematon selailuohjelma ei lataa niitä osia.

  • Virheellinen tag voi jättää jonkin osan sivusta näyttämättä kokonaan, tai koodia voi tulla näkyviin selailuohjelmassa sivulle.
    - Lähinnä unohtunut "-merkki tai aloittamaton / lopettamaton tag:i.

  • HTML-tiedoston nimi pitäisi olla ilman sananvälejä ja erikoismerkkejä. Myös isoilla ja pienillä kirjaimilla on merkitystä.


    up.gif SISÄLLYSLUETTELOON

    "KOODIKOPIOINTI" (Source)

  • Yleensä selailuohjelmissa on niinsanottu koodinkatsomisominaisuus ( Source ), jolla saa minkä tahansa sivun html-koodin käsiin nähtäväksi, jolloin on mahdollista tallentaa koodi itselleen tai kopioida osia siitä ja muokata sitten haluamakseen - näin voi opiskella html-koodia saamalla vinkkejä toisten tekeleistä.
    1. Tallentamalla "Sourse" haluamaansa paikkaan (vaikka kovalevylleen) tai kopioimalla kooditekstin työpöydän kautta tekstinkäsittelyohjelmaan.

    2. Tiedostoa voi muokata tekstinkäsittelyohjelmalla ja tallentaa sen minne haluaa tekstimuodossa. Tekstitiedoston nimi on hyvä päättyä tarkentimeen .html (.htm)

    3. Avata sitten .html-tiedoston selailuohjelmaan tarkasteltavaksi.
      Vaikka Netscape:n valikosta File / Open File...
      Tai vetämällä ja pudottamalla html.-tiedosto selailuohjelman päälle jos tämä tukee ominaisuutta.


    up.gif SISÄLLYSLUETTELOON

    TIEDOSTO WWW-PALVELIMELLE

    1. Yhteys palvelimessa olevaan (tilaan) hakemistoon.
        FTP, paikallisverkko
        hakemisto-tila pitää tietysti olla käytettävissä. Tunnus ja salasana.

    2. html-tekstitiedosto / muutkin tiedostot kopioidaan osoitettuun hakemistoon.
        Myös muutkin liitetiedostot ja hakemistot jos niitä on
        Siirtomuoto pitää olla oikea. Text, Raw Data.

    3. Pääset tarkistamaan kopioinnin tuloksen selailuohjelmalla sivun osoitteella Internetyhteydellä .
        Edellyttäen tietysti että sivusi on jaossa verkkoon, kopiointi on onnistunut ja sivut on rakennettu oikein


    up.gif SISÄLLYSLUETTELOON
    HTML-opas