Algelise kodulehe tegemise õpetus

Sissejuhatus

"Kuidas teha kodulehekülge" on arvatavasti küsimus, millele loodad sellelt veebilehelt vastuse leida. Käesolev kodulehe tegemise õpetus on mõeldud eelkõige nendele, kes ei oska HTMLi, kuid soovivad endale ise veebilehte teha.

Kui vajad rohkem kui algelist veebi, siis võta ühendust aadressil mikk@torvandi.ee ning kokkuleppelise tasu eest lasen Sulle või Sinu firmale valmistada ilusa ja funktsionaalse veebilehe.

Ettevalmistused

Oma esimest kodulehte on kõige lihtsam teha pisikese tasuta saadaval programmiga Frontpage Express 2.0, mille saad endale alla laadida siit. Veel läheb vaja FTP programmi, milleks sobib samuti tasuta programm WS_FTP LE, mille saad alla laadida siit. FTPga hakkad oma valmis kodukat internetti üles laadima. Mine nüüd tasuta registreeri end http://www.hot.ee või http://www.zone.ee kasutajaks, et saada tasuta veebiruumi koduleha jaoks! Sinu tulevase kodulehe aadressiks sai nüüd vastavalt http://www.hot.ee/kasutajanimi või http://web.zone.ee/kodulehenimi. Zone eelisteks rohkem ruumi ja (piiratud) PHP kasutamise võimalus.

Loo oma arvutisse eraldi kaust (folder), kuhu hakkad panema kõik kodulehe failid (sinna ära pane programme, mille enne alla laadisid)!

Kodulehe taust

Kui avad FrontPage siis on näha vaid valge tühi leht (ülal menüüd ja ikoonid), mille peale hakkad oma kodulehekülge tegema.

FrontPage Express 2.0

Alusta taustapildi või värvi paika panemisest! Kui soovid kasutada värvi, siis ava Format > Background... ning vali see avanenud dialoogiaknast Background: rippmenüüst. Kui tahaksid erilisemat värvitooni, siis ava samast rippmenüüst Custom! Nüüd avaneb uus dialoogiaken, kus on suur ja väike värviriba. Suurel värviribal otsi hiirekursoriga umbkaudne toon ja kõrval väikesel värviribal saad just selle õige värvitooni välja valida. Kui sobiv värvitoon olemas, vajuta nupule Add to Custom Colours ning seejärel OK-ile, millega kinnitad, et oled taustavärviga rahul! Et nüüd valitud värv taustaks ilmuks, tuleb vajutada OK nupule!

Taustavärvi valimine

Kui tahad taustaks pilti, siis ava samuti Format > Background..., kuid värvi valimise asemel tee linnuke Background Image kastikesse ning vajuta Browse nuppu. Pildi väljaotsimiseks arvutist vajuta veelkord Browse ning kui leiad sobiva pildi, siis vajuta Open nupule ning seejärel OK-ile!

Kui arvutis ei leidu Sulle meelepärast taustapilti, siis mine internetti, liigu ringi erinevatel kodulehtedel ning kui Sulle meeldib kellegi kodukal olev taustapilt, siis tee tausta peale parem hiireklõps ja vali avanenud rippmenüüst Save Background As... ning salvesta see oma kodulehe kausta ja toimi nagu eelmises lõigus kirjeldatud.

Taustavärvi ja pilti saad muuta sarnaselt lisamisega..

Tekstide lisamine

Nüüd tuleks paika panna kirjastiil ehk font (soovitatavalt "Verdana", "Arial" vms, sest need on enamlevinud ning ekraanilt hästi loetavad) ja selle värv, millega hakkad oma kodulehele kirjutama. Selleks ava Format > Font... dialoogiaken, kus saad paika panna kirjastiili seaded! Ära vali mõnda haruldast fonti, mida enamiku külastajete arvutis pole ja kindlasti arvesta sellega, et tausta pealt oleks hea teksti lugeda!

Teksti (ja ka piltide) paigutust (vaikimisi on need vasakul), kas vasakule, keskele või paremale, saad muuta, kui klikkad ühele nendest nuppudest, mis on väljatoodud alumisel pildil.

Tekstide ja piltide nihutamine

Vasakpoolsele nupule klikates nihkub tekst või pilt vasakule, keskmisele keskele ja parempoolsele klikates paigutad teksti või pildi paremale.

Kui vajutada klaviatuuril Enter -ile tekib suur reavahe ning Shift ja Enter klahvide vajutamisel väike reavahe.

Piltide lisamine

Kui tahad oma lehele lisada mõnda pilti (sealhulgas liikuvat pilti ehk animatsiooni), siis toimi järgnevalt: võta lahti FrontPage-s lehekülg, kuhu soovid pilti asetada, ning ava Insert > Image, vajuta Browse nupule, otsi pildifail üles, klõpsa sellele ning klikka Open nupule! Nüüd peaks lisanduma pilt (animatsioon FrontPage-s ei liigu!).

Internetist saad endale pildi või animatsiooni salvestada siis, kui teed pildile parema hiireklõpsu, avanenud rippmenüüst valid käsu Save picture as... ja salvestad selle koduka kausta.

Kui Sa soovid, et pildile minnes ilmuks kollases kastis tekst (mine mõnele näitepildile peale), siis tee pildile parem hiireklõps, vali avanenud rippmenüüst Image, kirjuta Text: lahtrisse soovitud tekst ja vajuta OK nupule! Kollases kastis kiri ilmub pildile minnes ainult siis, kui vaatad oma lehte internetilehitsejaga ehk browser`iga (nt. Internet Explorer-iga)!

Siltviite lisamine

Selline viide on kasulik siis, kui lehe menüü koosneb pildifailidest ja külastaja lehitsejal on graafika välja lülitatud. Sel juhul näeb ta vähemalt siltviiteid ning saab Sinu kodulehel normaalselt navigeerida.

Siltviide

Lingid

Peale esilehe oleks vaja teha ka mõned viited ehk lingid, et suunata külalisi teistele lehtedele. Enne, kui hakkad neid tegema, salvesta esileht järgmiselt: File > Save As..., avanenud aknast tuleb Page Title: lahtrisse kirjuta lehekülje pealkiri, mis jääb ülesse sinisele reale (sellel lehel on pealkirjaks "Kodulehe tegemise õpetus") ja alumisse lahtrisse Page Location: selle lehekülje nimi, mis esilehe puhul peab kindlasti olema index.htm!!! Nüüd tuleks vajutada nupule As File ja otsi üles koduka kaust ning vajutada Save nuppu!

Enne lingi tegemist pead lingitava lehe, kuhu tulevane link külastaja viib, valmistama! Seda lehte saad hakata tegema järgmiselt: otsi üles ikoonide hulgast (asuvad menüüde File , Edit , View , Insert , ... all) ikoon, millel on kujutatud tühja murtud nurgaga valget lehte! Klikka sellele ja avaneb uus valge taustaga leht.

Uus leht

Hakka seda kujundama samade võtetega nagu avalehte! Kui lingitav leht valmis, siis salvesta see oma koduka kausta! Nüüd ei tohi lehe nimeks panna index.htm (sest see on esilehe nimi), vaid midagi muud (nt. kui leht sisaldab pildigaleriid, siis võiks lehe nimi olla galerii.htm)! Hea oleks, kui nimi ei sisaldaks tühikuid ega täpitähti. Nüüd otsi ikoonide reast välja sinine nooleke, mille ots on suunatud vasakule  ja klikka sellele.

Viib tagasi avalehele

Avaneb uuesti avaleht, kus tuleb aktiveerida hiirega tekst või pilt, millest tahad linki teha. Nüüd ava Insert > Hyperlink... ja vali järjehoidja vahelt Open Pages: ning seal asuvast Open Pages: lahtrist otsi üle lingitava lehe pealkiri ja vajuta OK nupule! Nüüd küsitakse, kas Sa ikka tahad linki teha ning kui see on nii, siis vajuta Yes !

Lingi lisamine

Kui tegid lingiks teksti, siis saab selle värve vastavalt olekule muuta, kui avad Format > Background... .
Hyperlink: - tavaolekus oleva lingi värv
Visited Hyperlink: - külastatud lingi värv
Active Hyperlink: - aktiiveeritud lingi värv st kui külastaja vajutab lingile

Kui soovid linki, mis suunab kellegi teise veebilehele, tuleb Insert > Hyperlink... dialoogiaknast Hyperlink Type: rippmenüüst välja otsida http:// ja URL: lahtrisse kirjutada http:// järele kodulehe aadress (välja peaks see nägema umbes selline http://www.hot.ee/micks)! Kui tahad, et leht avaneks uues aknas, tuleb Target Frame: lahtrisse kirjutada _blank !

Kui tahad endale sellist linki, millele klikates saab autorile maili saata, nagu all toodud näites, siis toimi järgnevalt: aktiveeri pilt või tekst, otsi Insert > Hyperlink... dialoogiaknast Hyperlink Type: rippmenüüst mailto: ja URL: lahtrisse kirjuta mailto: järgi oma e-maili aadress (näeb välja umbes selline: mailto:kasutajanimi@hot.ee) ning vajuta OK !

mikk@torvandi.ee

Kaunteri lisamine

Kui soovid teada, palju külastajaid Sinu lehel käib, siis kasuta oma lehel loenduri- ja statistikasüsteemi ehk kaunterit. Üsna hea kaunter on Z-Kaunter, mille saad endale registreerida aadressil http://counter.zone.ee/registreeri.php3 . Registreerides võid tühjaks jätta viimased kolm lahtrit ning kui ülejäänud lahtrid täidetud vajuta OK nupule! Nüüd avaneb uus leht, kus saad kaunterit soovi korral seadistada. Kui vajutad OK nuppu näed oma kaunterit täpselt sellisena nagu see Sinu seadistustega välja nägema hakkaks. Seejärel otsi vormi ülaosast linki tekstiga Vaata siit, kuidas saad kaunteri oma kodulehele paigaldada! ning kliki sellele. Avaneb uus aken, kus kasti sees on HTML-kood, mis tuleb aktiveerida ning kopeerida. Peale seda tule tagasi FrontPage-sse ning tee kõik samamoodi nagu ülalkirjeldatud kontaktivormi HTML-koodi lisamisega. Kaunteri andmeid saad muuta aadressil http://counter.zone.ee/ . Enne muudatuste tegemist pead end loomulikult sisse logima.

Kaunter

Külalisteraamatu lisamine

Külalisteraamatu saad endale registreerida aadressil http://book.zone.ee/registreeri.php . Kui oled end ära registreerinud otsi linki tekstiga HTML kood 2 ning kliki sellele ja tee avanenud koodiga sama moodi nagu on seda kirjeldatud kontaktivormi paigaldamise õpetustes. Külalisteraamatu andmeid saad muuta sisselogides aadressilt http://book.zone.ee/ .

Hääletuse lisamine

Hääletuse saad endale registreerida aadressil http://poll.zone.ee/registreeri.php3 . Hääletuse lisamine/muutmine toimub sarnaselt kaunteri ja külalisteraamatu lisamise/muutmisega.

Jututoa lisamine

Tasuta jututoa saad endale registreerida aadressilt http://www.parachat.com/basic/get-yours.html . Seal tuleb Sul oma tulevase jututoa seadistused paika panna ning kui see tehtud, siis kliki nupule
<< CLICK HERE >> - SHOW ME MY ROOM CODE . Seejärel avaneb uus aken, kus on jututoa kood, mille pead oma kodulehele kopeerima, ning ka näide, milline Su chat välja näeb.

Antud jutukas on muidu päris hea, kuid sisaldab vahetevahel avanevaid pop-up reklaamiaknaid, mida kahjuks ei ole võimalik eemaldada.

Programmid külastajatele alla laadimiseks (downloadimiseks)

Kui soovid oma lehele panna programme teistele tõmbamiseks, siis toimi järgmiselt: ava FTPprogramm, logi end sisse ning saada programm internetti (vt. allpool olevat õpetust "Veebilehe Internetti saatmine")! Nüüd ava FrontPage, kirjuta tekst või lisa pilt, millele klikates hakab külastaja programmi alla laadima ja aktiveeri see! Ava Insert > Hyperlink... ning URL: lahtrisse kirjuta oma koduka aadress ja lisaks programmi nimi sellisel kujul nagu Sa ta Internetti üles laadisid. Kui programmi nimi on hea_programm, aga Internetti saatsid selle failina programm.zip, siis peaks seal lahtris olema http://www.hot.ee/sinukasutajanimi/programm.zip .

Kui programm on liiga suur, et oma kodulehele saata, siis toimi järgnevalt: otsi leht, kus on sama programm allalaadimiseks ja tee downloadimise lingi peale parem hiireklõps, vali avanenud rippmenüüst Properties ning tee link sellele aadressile, mis asub Address (URL): järel. 

Kindlasti ei tohi levitada piraattarkvara!

Veebilehe internetti saatmine

Nüüd, kui leht valmis, tuleks see internetti üles laadida. Enne seda aga tee iga pildi peale, mille Sa oma kodukale panid, parem hiireklõps ja ava rippmenüüst Image Properties ! Vaata, et Image Source: lahtris olev tekst EI OLEKS file:///C:/Sinufolder/pildinimi.jpg , vaid lihtsalt pildinimi.jpg või http://www.hot.ee/kasutajanimi/pildinimi.jpg !

Samalaadne kontroll tuleb teha ka taustapiltidega, kui valisid taustaks pildi mitte värvi. Image Properties asemel tuleb valida Page Properties , avanenud aknas tuleb järjehoidja Background valida ja teha vajadusel muudatused. Kui tegid muudatused, siis võivad ennist lisatud pildid ära kaduda, kuid kui Su kodukas koos pildifailidega jõuab internetti, on nad Su lehel ilusasti olemas.

Et lehte uploadida läheb Sul nüüd FTP programmi vaja. Ava see ning täida seal järgmised lahtrid (NB!!! Hot.ee kasutajad FTP programmi kasutada ei saa ja koduleht tuleb üles laadida hot.ee veebiliidese kaudu. Failide üleslaadimiseks tuleb sisse logida www.hot.ee lehele ja sealt valida Koduleht):

Profile name: Kodukas (siia võid ükskõik mida kirjutada)

Host Name/Address: web.zone.ee

Host Type: Automatic Detect

User ID: kasutajanimi

Password: salasõna

Account: (jäta tühjaks)

Comment: (jäta tühjaks)

Kui vajalikud lahtrid täidetud klikka OK nupule! Nüüd küsitakse uuesti salasõna! Kui õnnestus sisse logida, otsi vasakust kastist oma koduklehe kaust, kuhu Sa kõik oma koduka failid eelnevalt salvestasid, ning lae nad kõik internetti (nool paremale)! Failid on internetis siis, kui nad on jõudnud parempoolsesse kasti.

Failide üleslaadimine

Nüüd võid oma kodukat internetis vaadata aadressil http://www.hot.ee/kasutajanimi/. Kui kõik ei ole päris õigesti, siis tee FrontPages vajalikud parandused ning ava FTP programm, võta arvutist parandatud failid ja saada uus täiendatud leht (ainult muudetud failid, lisatud pildid) teele! Nüüd võib FTP Sulle öelda, et sellis(t)e nime(de)ga fail(id) on juba olemas ja küsib, kas Sa soovid seda (neid) asendada ning kui see on nii, siis vajuta nuppu Yes või Yes to All! Et muudatused internetis näha oleksid, tuleb vajuta veebilehitsejal Refresh nuppu!

Kodulehe otsingumootoritesse lisamine

Nüüd, kui Su kodukas on internetis üleval, võiksid selle teha kättesaadavaks kõigile, registreerudes otsingumootorites! Google otsingumootorisse saad registreerida aadressil http://www.google.ee/addurl/, kus tuleb URL: lahtrisse kirjutada kodulehe aadress, kirjuta alumisse lahtrisse tekst, mida näed pildil ja vajutada nupule Add URL .

NETI.EE otsimootorisse registreerimiseks tuleb kõigepealt minna sellesse kategooriasse, kuhu tahad lehe lisada, ning seejärel vajuda lingile Lisa , mis asub otsinguriba all. Kui avanenud ankeet täidetud, tuleks vajutada nupule Esita .

WWW.ee otsingumootorisse registreerimine käib sarnaselt. Peale õige kataloogi väljaotimist vajuta lingile Lisa uus leht www.ee kataloogi, täida ankeet ja vajuta nupule Salvesta .

Pea meeles, et lehti ei lisata otsimootorisse koheselt, niiet varu veidi kannatust!


Kui ise ei taha/ei saa/ei oska või vajad midagi enamat, kui algelist kodulehte, siis võta ühendust maili teel aadressil mikk@torvandi.ee ning kokkuleppelise tasu eest võid saada ilusa veebilehe omanikuks!

sissejuhatus | ettevalmistused | taust | tekstid | pildid | lingid | kaunter | külalisteraamat | hääletus | jututuba | failid allalaadimiseks | koduleht internetti | koduleht otsimootoritesse

XHTML 1.0 Strict | CSS

© Lehe sisu (va õppeotstarbeks) autori loata mitte kopeerida