Oma kotisivu ammattiosaston tiedottamisessa

Download Report

Transcript Oma kotisivu ammattiosaston tiedottamisessa

Internet

 Kehittynyt ARPAnet:istä 1960-luvun lopulla     Tarvittiin tehokkaampaa ja luotettavampaa yhteiskäytäntöä Kehittäjänä USA:n puolustusvoimat ja joitakin yliopistoja Peitto käytännössä koko maailma Sisältää mm WWW:n, sähköpostin, FTP…

Sanastoa ja käsitteitä

    HTML(Hyper Text Markup Language)=hypertekstin merkintäkieli TCP/IP(Transmission Configuration Protocol/Internet Protocol)=Internetin tiedonsiirtoprotokolla HTTP(Hyper Text Transfer Protocol)=hypertekstin siirtoprotokolla IP-osoite=Internetiin liitetyn laitteen uniikki osoite. (Esim 207.46.130.45 jonka DNS muuttaa nimeksi WWW.Microsoft.com

)

Internetin toiminta

Root DNS for .com

Root DNS for .fi

WWW.MICROSOFT.COM

Root DNS for .

Root DNS for microsoft.com

WWW.MICROSOFT.COM???

ISP (palveluntarjoaja) Sonera, Elisa, MTV3, Saunalahden Serveri

WYSIWYG-editorit

  WYSIWYG(What You See Is What You Get)  Helpottaa sivujen luontia ja vanhojen muokkausta   Luontivaiheessa ei tarvitse kirjoittaa koodia Parhaimmillaan työläissä työvaiheissa (interaktiiviset kuvat, lomakkeet, kehykset, taulukot)  JavaScript ominaisuudet    Koodi ei ole kovin taloudellista Ohjelma ei aina osaa toteuttaa sitä, mitä käyttäjä haluaa Tuottaa joskus virheellistä koodia  Maksullinen Frontpage, Dreamweaver

ASCII-editorit

 Ascii-editorit  Helpottaa koodin luomista: ei tarvitse muistaa pilkulleen elementtien parametreja   Tuottaa taloudellista koodia Koodi on koko ajan näkyvillä -> virheet vähenevät  JavaScript ominaisuudet  Vaatii HTML-koodaus osaamista  Ilmainen  Arachnophilia, SiteAid

Koodaus

 Koodaus  Tärkeää hallita, vaikka loisikin sivuja editorilla: koodin tunteminen on ylläpitäjän tärkein ominaisuus  Koodi on aina taloudellista  Melko työlästä

Yleistä HTML-koodista

 Eri HTML-versioita, sekä IE ja NN laajennukset     Koodissa teksti on rajattu alku- ja lopputunnisteilla Tagin sisälle on kirjoitettu tieto siitä, mitä HTML-elementtiä käytetään Voi käyttää isoja ja pieniä kirjaimia Tagipari alkaa aina ja päättyy (jos päättymistä tarvitaan)

Yleistä HTML-koodista

  WWW-osoitteissa(sivujen nimissä)

ei sallita ääkkösiä

Aloitussivun nimi pitää yleensä olla ”

index.htm

”, ”

index.html

”

HTML-elementti

  Rajaa koko HTML-dokumentin teksteineen ja komentoineen.

Sisältää kaksi osaa: HEAD-elementti (otsikkotiedot) ja BODY-elementti (varsinainen dokumentti) Esim: sivun sisältö

HEAD-elementti

   Määrittelee otsikko-osan Sisältää TITLE-elementin, josta näkyy käyttäjälle selaimen yläpalkissa dokumentin nimi Voi sisältää META-informaatiot, joita voidaan käyttää dokumentin identifioinnissa ja indeksoinnissa Esim: Yläpalkin teksti

BODY-elementti

   Dokumentin runko, joka pääasiassa näkyy käyttäjälle Sisältää varsinaiset tekstit, kuvat jne. Voi sisältää myös JavaScriptiä, VBScriptiä… Parametreilla voidaan määrittää mm taustan, tekstin, käyttämättömien linkkien, käytettyjen linkkien, aktiivisten linkkien värit, taustakuvat... Esim: dokumentin runko

BODY-elementin parametreja

bgcolor = taustan väri (oletuksena valkoinen) Esim: TAI text = tekstin väri (oletuksena musta) Esim: TAI dokumentin runko

BODY-elementin parametreja

• • • background = taustakuva Mikäli taustakuva on selainikkunaa pienempi, selain lisää kuvia toistensa viereen ja alle, kunnes ruutu on täytetty Latautuu taustavärimäärittelyn päälle Kuvan koko ei mielellään saisi olla yli 150 kilotavua (JPG) • Selain tallentaa kuvan välimuistiin, joten samaa kuvaa kannattaa käyttää mahdollisimman monella sivulla Esim: dokumentin runko

Otsikko-elementti

  Otsikoksi määritelty teksti sijaitsee aina omalla rivillään ja sen ylä- ja alapuolelle selain tekee hieman tyhjää tilaa HTML-dokumentissa voi olla kuudentasoisia otsikoita Esim:

Pääotsikko

…
Alaotsikko

BR-elementti

  Komento
sijoittaa tekstiin rivinvaihdon, mutta ei vaihda kappaletta Komennon jälkeen jatkuva teksti alkaa seuraavalta tyhjältä riviltä  Ei ole lopettavaa komentoa

Lihavointi-elementti

Esim:

lihavoitu teksti

Kursivointi-elementti

Esim:

kursivoitu teksti

Alleviivaus-elementti

Esim: alleviivattu teksti

Ylä- ja alaindeksi-elementti

Esim: alaindeksi Esim: yläindeksi

Yliviivaus-elementti

Esim: Yliviivattu teksti

FONT-elementti

 FONT-elementin parametrit sisältävät mahdollisuuden muuttaa tagiparin rajaamalla alueella tekstin tyyppiä, väriä ja kokoa

FONT-elementin parametreja

color = tekstin väri  Ohittaa BODY-elementin text-parametrin määrittelyt rajatulla alueella Esim: tekstiä face = fontin tyyppi  Toimii JOS fonttityyppi on asennettu käyttäjän koneelle, muuten selain käyttää oletusfonttia Esim: tekstiä

FONT-elementin parametreja

size=tekstin koko  Kokomuutokset tehdään suhteessa muihin fonttikokoihin  Kokomuutokset ovat välillä 1 – 7  Perusfontti on 3 Esim fontti koosta 3 kokoon 5 fontti koosta 3 kokoon 1

P-elementti

 Kirjoitettu teksti jaetaan kappaleisiin Esim:

kappale1

kappale2

align=tasaustapa  Vaihtoehdot ovat left (vasen), center (keskitetty) ja right (oikea). Oletuksena on left.

Esim:

kappale

HR-elementti

  Piirtää kuvaruudun poikki vaakasuoran viivan, jota voidaan käyttää erottelemaan kappaleita ja tekstin osia toisistaan Oletuksena viiva ulottuu selainikkunan laidasta laitaan.

HR-elementin parametreja

align=viivan tasaustapa center | left | right widht=viivan absoluuttinen tai suhteellinen leveys pikseli|prosentti(suhteessa selainikkunan leveyteen) size=paksuus pikseleinä(0-100, oletuksena 2) color=viivan väri heksa|nimi

CENTER-elementti

 Keskittää kaikki elementit, jotka ovat tagiparin välissä, jollei tagiparin sisällä muuta määrätä Esim:

Keskitettävä otsikko

Tekstikappaleen align-parametri ohittaa CENTER-elementin vaikutukset ja teksti tasataankin oikeaan laitaan.

UL-elementti

 Määrittelee luettelon  Parametreja listamerkiksi: disc=pallo circle=ympyrä square=neliö  Listan jokainen kohta määritellään komennolla

  •  lopettaa listauksen Esim:
    • listan eka rivi
    • listan toka rivi

    UL-elementti

      UL-elementtiä voidaan käyttää myös tekstin sisentämiseen, jolloin

  • elementtiä ei käytetä Jos kappaletta halutaan sisentää lisää, komentoja kirjoitetaan useampia Esim:

    otsikko

          kappale1

          kappale2

    A-elementti

      A-elementillä on kaksi pääasiallista tehtävää: ilmoittaa kohta mihin viitataan tai muodostaa linkki Sillä voidaan rajata dokumenttiin sijoitettuja objekteja ja tekstiä  A-elementti ei yksinään tee mitään, vaan sen täytyy sisältää vähintään yksi parametri

    A-elementin parametreja

     Linkki toiseen objektiin, elementtiin tai dokumenttiin yhdistetään A-elementin href parametrilla  Linkki voi viitata toisen HTML-dokumentin lisäksi esim uutisalueelle, telnet-yhteyden takana olevaan palveluun, sähköpostiosoitteeseen, FTP palvelimella olevaan tiedostoon… Esim

    >Linkki Mikkisoftan sivuille

    A-elementin parametreja

     Jos viitattava tiedosto sijaitsee samassa hakemistossa, voi koneosoitteen jättää kokonaan pois ja antaa pelkän tiedoston nimen  Jos viitattava tiedosto sijaitsee muokattavan tiedoston kansion alikansiossa, riittää kun kirjoittaa alikansio/tiedostonimi Esim lisätietoja saat tästä

    A-elementin parametreja

       Linkki voi viitata myös tiettyyn tekstin kohtaan samassa tai jossain toisessa dokumentissa. Tällöin on kyse ankkurista Ankkuri suoritetaan A-elementin parametrilla name Ankkurointi toteutetaan kahdella erillisellä elementillä: itse linkillä ja viitattavan kohdan määrittelevällä ankkurilla

    Esimerkkejä ankkuroinnista

    Ankkuri:tekstiä Jos viitattava tieto on samassa dokumentissa kuin linkki, linkitys toimii seuraavasti: linkki ankkuriin Jos viitattava tieto on eri dokumentissa: linkki ankkuriin

    Sähköpostiosoite linkkinä

     A-elementillä voidaan myös määritellä sähköpostilinkin esimerkiksi henkilön yhteystietojen yhteyteen. Tämä toteutetaan lisäämällä mailto-komento sähköpostin eteen Esim

    ”>Postia Janille

    BODY-elementin parametreja

    link = käyttämättömän linkin väri(sininen) alink = aktiivisen linkin väri (violetti) vlink = vierailtun linkin väri (punainen) Esim: dokumentin runko

    IMG-elementti

     IMG-elementillä voidaan tuoda kuvia dokumenttiin  src-parametrilla määritellään kuvan osoite/nimi Esim

    Kuva linkkinä

     Kuva voi myös toimia linkkinä sijoittamalla IMG-elementin A-elementin tagiparin sisälle Esim :

    PRE-elementti

      PRE-elementti tuo tekstin näyttöön sellaisenaan välilyönteineen sisennyksineen ja rivinvaihtoineen kuin se on koodiin kirjoitettu Käyttökelpoinen esim yksinkertaisten taulukoiden tekemiseen Syntaksi: 

    teksti

    TABLE-elementti

       Taulukko määritellään TABLE-tagien väliin TABLE-elementti ei tee yksinään mitään, vaan se sisältää aina taulukon rivin luovan TR-elementin, joka taas sisältää sarakkeen luovan TD-elementin Sarakkeita tai rivejä ei määritellä erikseen. Selain laskee tarvittavan sarakkeiden määrän sen mukaan, montako solua määrittelet taulukon leveimmälle riville

    TABLE-elementti

    Esim

    vasen yläoikea ylä
    vasen alaoikea ala
     Border-parametrilla määritellään taulukon kehyksen paksuus pikseleinä, oletuksena on useimmiten 0 Esim taulukko

    Lomakkeet

     FORM-elementillä luodaan esim palautelomakkeita  Lomakkeen täytyy tietää miten ja minne informaatio lähetetään. Tämä ilmoitetaan action-parametrilla Esimerkki sähköpostilla lähetettävästä

    i >lomakkeen syöttötiedot

    Lomakkeet

       Halutessasi palautteen lähetettävän suoraan Internetistä ilman sähköpostia, täytyy käyttää cgi-ohjelmistoja Tällöin kerrotaan mm – minkä palvelimen cgi-ohjelmaa käytetään – lähetystyyppi (post) – määritellään erikseen vastaanottaja ja otsikko Lisäksi seuraavan sivun esimerkki kääntää käyttäjän ”kiitos palautteesta”-sivulle

    Lomakkeet

    INPUT-elementti

     Lomakkeen syöttökentät määritellään pääasiassa INPUT-elementillä  Name-parametrilla määritellään kentälle nimi. Tämä on välttämätöntä INPUT elementille, sillä tällä tiedolla kerrotaan käyttäjän kirjoittaman tiedon laatu.

    INPUT-elementin type parametri

      Type-parametri on tärkein parametri INPUT-elementissä. Sillä määritellään mikä tyyppisen syötekentän selain piirtää näytölle Type-parametrilla mm seuraavat vaihtoehdot syötteen tyypiksi:

    Type=”text”

      Yksinkertaisin lomakkeen syöttökenttä, johon käyttäjä voi syöttää tekstiä Oletuskoko on 1riviä korkea ja 20 merkkiä leveä.

    Esim sähköpostiosoitteeni:

    Type=”radio”

      Radio-kentällä luodaan monivalintakyselyitä, joista yksi vaihtoehto voi olla valittuna Eri vaihtoehdot ryhmitellään samaan ryhmään samansisältöisellä name-kentällä  Value-kentällä määritellään kunkin vaihtoehdon nimi

    Type=”radio”

    Esim sivusto on mielestäni: huono
    kohtalainen
    hyvä

    Type=”checkbox”

     Checkbox-kentällä luodaan rastitettava valintaruutu Esim Lähettäkää minulle osaston lehti

    TEXTAREA-elementti

      Text komennolla on helppo syöttää yksittäinen sana; suuremmat tekstimäärät syötetään TEXTAREA-elementillä Oleisimmat parametrit ovat – name (syötekentän nimi) – cols (kentän leveys merkkeinä) – rows (rivien määrä) Esim

    RESET- ja SUBMIT kentät

      Lomakkeen tietojen lähetysnappula luodaan submit-kentällä. Value-kentällä annetaan nappulan teksti Reset kentällä tyhjennetään lomake Esim

    Kehykset

        Kehyksen määrittelyt tehdään omaan erilliseen dokumenttiin. Tämä dokumentti ei näy käyttäjälle FRAMESET-elementillä saadaan jaettua selainikkuna pienempiin osiin Eri osat ovat itsenäisiä ja toisistaan riippumattomia, joihin voi ladata minkä tahansa erillisen dokumentin FRAMESET-elementti ei poikkeuksellisesti sijoitu HEAD otsikko-osaan, eikä BODY runko osaan. Dokumentti ei edes tarvitse BODY runko osaa

    FRAMESET-elementti

      Kehysmäärittelyt rajaavassa dokumentissa täytyy olla ainakin cols (sarakkeet) tai rows (rivit) määritteet.

    Eri osien kokoa määritellään joko prosentteina tai pikseleinä Esim määrittelyt

    FRAME-elementti

     FRAME-elementillä kutsutaan kehykseen haettavaa dokumentti  Src-parametrilla määritellään kutsuttavan dokumentin osoite  Name-parametrilla märitellän kehykselle nimi Esim

    Esimerkki kehysmäärittelystä

    AO XX

    Esimerkki kehysmäärittelystä

      Määrittely jakaa näytön pystysuunnassa kahteen osaan kokosuhteessa 20/80 ja lataa kehyksiin kaksi eri dokumenttia Määrittelyllä rows=”20%,80%” selain jakaisi näytön vaakasuunnassa

    Linkki kehysmäärittelyä käytettäessä

     Linkillä pyydettyä dokumenttia avattaessa toisessa kehyksessä, kuin missä itse linkki sijaitsee, käytetän linkin target-parametria Esim

    ” target=”oikea”>Metalliliiton kotisivu

    Linkki kehysmäärittelyä käytettäessä

     Jos linkki on samassa kehyksessä johon sivua pyydetään ja avatavassa sivussa on myös kehykset kannattaa lisätä linkin perään parametri, jolla saadaan pyydetty sivu avautumaan omaan ikkunaan Esim

    target=”_blank”>linkkiteksti

    META-elementti

      META-elementillä voidaan määritellä sopivia hakusanoja hakurobotille, jotta sivut löytyisivät robottia käytettäessä mahdollisimman loogisesti META-elementillä on kaksi pakollista, mutta vaihtoehtoista parametria: http-equiv tai name

    Name-parametri

     Voidaan käyttä esimerkiksi sivun sisällön kertomiseksi description-parametrilla  Voidaan syöttää hakusanoja, joilla sivusto löytyy hakukoneesta keywords-parametrilla

    Name-parametrin toiminta

      Esimerkiksi Altavista-hakurobotti indeksoi antamasi hakusanat (keyword) korkeammalla prioriteetilla, kuin ”normaalit” dokumentin osat.

    Haettaessa hakusanoilla, Altavista näyttää linkkilistassa ao:n sivuston kohdalla tekstin ” metallityöväen liiton ammattiosasto xx:n kotisivut” eli description-arvon

    Tekijänoikeudet

     Internetin tarjoamat materiaalit ovat yleisesti tekijänoikeuksien alaisia   Halutessasi julkaista kotisivullasi esim Metallin kotisivuilla tai Ahjossa olevaa materiaalia, kysy artikkelin kirjoittajalta ja muista mainita lähde Liiton logoa saa käyttää, kunhan ottaa huomioon tunnuksen graafiset ohjeet