Skip to content. | Skip to navigation

Jyväskylän yliopiston Koppa

HUOM! Kopan käyttö päättyy 31.7.2024! Lue lisää.


Navigation

HTML-Kit-ohjelma

by Tanja Tuulikki Välisalo last modified Nov 14, 2014 03:51 PM
Ohjelman käyttöönotto ja käyttöliittymä

Ohjelman käyttöönotto

HTML-Kit-ohjelman ilmainen versio HTML-Kit 292 on ladattavissa myös kotikoneelle. 

Tee seuraavat muutokset ohjelman asetuksiin:

  • Avaa HTML Kit -ohjelma Käynnistä | Kaikki ohjelmat | HTML-Kit | HTML-Kit (Start | All programs | HTML-Kit | HTML-Kit).
  • Sulje ensimmäisenä avautuvat ikkunat Cancel-painikkeella.
  • Valitse Edit | Preferences.

1) Poistetaan käytöstä koodia automaattisesti täydentävä toiminto.

  • Valitse välilehti Auto Complete. Poista valinta kohdasta Enable Auto Complete.

2) Poistetaan käytöstä englannin kielen oikoluku.

  • Valitse välilehti Proofing. Poista ruksit kolmesta ylimmäisestä ruudusta. (HUOM! Jos laadit esim. harjoitustyöhösi sisältöjä englanniksi, voit ottaa oikoluvun takaisin käyttöön.)

3) Määritellään rivin vaihtumiskohta työskentelynäkymässä.Tämä ei vaikuta siihen, miltä teksti näyttää verkkoselaimessa, ainoastaan editorin koodinäkymässä.

  • Valitse välilehti Editor. Ruksaa WordWrap Options -osiosta kohta Wrap at column. Näin lähdekoodin tekstissä rivi vaihtuu automaattisesti määrittelemässäsi kohdassa. Aseta merkkimääräksi esimerkiksi 80 (noin puoli näytöllistä) tai 150 (noin näytön leveys) tai jotain siltä väliltä.

4) Määritellään seuraavaksi dokumentin runko eli koodi, joka tulee automaattisesti valmiina jokaiseen ohjelmalla luotavaan html-tiedostoon.

  • Valitse välilehti Startup. Tarkista, että siinä on ruksi kohdassa Insert following text into new documents. Sen alapuolella olevassa ruudussa on dokumentin runko. Oletuksena ruudussa oleva teksti on dokumentin runko, joka määrittelee sen HTML 4.0 -kielen mukaiseksi. Vaihdetaan runko sellaiseksi, joka määrittelee dokumentin tällä kurssilla käyttämämme XHTML 1.0 Transitional -kielen mukaiseksi.
  • Hae uusi koodinpätkä WWW-selaimella osoitteesta http://users.jyu.fi/~tatjana/htkp315/runko.html. Kopioi sivulla oleva teksti, ja liitä se äsken tyhjentämääsi ruutuun. Tarkista, että teksti alkaa aivan ruudun ensimmäisen rivin alusta.
  • Hyväksy tekemäsi muutokset OK-painikkeella.
Voit testata runkokoodin määrittämisen onnistumista luomalla tyhjän dokumentin pikakomennolla [Ctr+Alt+N] tai valikkokomennolla File | New document

Ohjelman käyttöliittymä

HTML-Kit-ohjelmassa on runsaasti työskentelyä helpottavia työkaluja, joiden avulla koodia voi luoda. Koodityökalut löytyvät pääasiassa välilehdiltä ja valikkorivin Actions-valikosta.

Ohjelmaikkunan vasemmasta alanurkasta pääsee puolestaan vaihtamaan näkymää. Dokumenttia voi tarkastella muokkausnäkymässä (Edit) tai esikatselunäkymässä (Preview). Muut näkymävaihtoehdot liittyvät koodintarkistustyökaluihin.

Avoinna olevien tiedostojen välillä voi liikkua aivan ohjelmaikkunan alareunasta löytyvillä painikkeilla, joissa on tiedostojen nimet tai valikkorivin Window-valikon kautta.

Pikanäppäimet

HTML-Kit-ohjelmassa voit usein käyttämillesi toiminnoille määritellä pikanäppäimet – aivan kuten MS Word -ohjelman tyyleille. Esimerkiksi pääotsikon merkinnässä käytettävälle h1-elementille luodaan pikanäppäin seuraavasti:

  • Mene pikanäppäinten määritysikkunaan valikkokomennolla Tools | Customize | Customize Keyboard Shortcuts.
  • Pikanäppäimen lisäämiseksi valitse avautuvasta ikkunasta Add-painike.
  • Avautuvassa Assign Commands -ikkunassa määritellään ensiksi varsinainen komento vasemman yläreunan Press a key -kentässä. Ellei kohdistin vilku kentässä jo valmiiksi, klikkaa kenttää hiirellä.
  • Paina näppäinyhdistelmää [Ctrl+1]. Näppäinyhdistelmä ilmaantuu tekstikenttään.
  • Valitse nyt oikeasta reunasta toiminto, jonka haluat tällä näppäinyhdistelmällä tapahtuvan. Toimintotyyppejä on useita, valitse Action. Sen alasvetovalikosta löydät kohdan Document > Heading 1. Valitse se.
  • Hyväksy pikanäppäin alareunan Add-painikkeella. Valmis näppäinyhdistelmää ilmestyy ikkunan vasemmassa alareunassa olevaan ruutuun.
  • Hyväksy muutokset ja sulje ikkunat painamalla OK-painikkeita.
  • Kokeile näppäinyhdistelmän toimintaa avoimessa dokumentissa. Muista, että voit aina perua tekemäsi muutokset pikakomennolla [Ctrl+Z].
  • Voit halutessasi antaa samanlaiset pikanäppäimet myös h2- ja p-elementeille.

Koodin siistiminen

Koodia on helpointa lukea silloin, kun se on myös siististi aseteltua. Tämän voi toteuttaa myös automaattisella koodin siistimiseen tarkoitetulla työkalulla.

  • Valitse Tools-välilehdeltä ensimmäisen kuvakkeen (ks. kuva) pudotusvalikosta kohta Indent tags / beautify. Aktiivisena oleva tiedosto jakautuu kahteen ruutuun, joista oikeanpuoleisessa näkyy ehdotus uudeksi koodiksi.
  • Jos olet tyytyväinen uuteen muotoiluun, niin valitse työkaluriviltä oikeanpuoleisin painike Copy content in the output window to the editor. (Painikkeen nimi tulee esille, kun viet hiiren sen päälle. Jos työkalu näyttäytyy harmaana, niin klikkaa ensin kursori vilkkumaan oikeanpuoleisessa ruudussa.)