Kodulehe õpetuse sisukord


Kodulehekülje valmistamine

Teksti värv ja taust

Kodulehe värvide ja tausta valimine

Kõigepealt pane paika kodulehe taust ja lehel kasutatavad värvid. Selleks ava rippmenüüst Format > Page Colors and Background ...

Nüüd avaneb dialoogiaken, kus saad muuta veebilehel kasutatavaid teksti- ja taustavärve. Värvide muutmiseks tuleb aktiveerida Use custom colors. Sealt saad muuta vaikimisi kodulehe teksti värvi (Normal text) ja tausta värvi (Background).

Kui tahad taustavärvi asemel taustapilti kasutada, siis tuleb vajutada Background Image välja järel olevale kollasele kataloogikujulisele nupule ning seejärel otsida eelnevalt kodulehe piltide kataloogi salvestatud pilt.

Värvide valimiseks tuleb vajutada värviga nupule, misjärel avaneb aken, kus saad endale sobiva värvi välja timmida.

Täpse värvitooni otsimine

Värvide ja kirjastiili valikul jälgi seda, et veebilehe sisu oleks mugav haarata. Väldi eredaid toone, keerulisi kirjastiile ja taustapilte ning teksti tooniga sarnaseid taustavärve.

Arvutiekraanilt on kõige parem lugeda tumedat kirja heledalt taustalt.

Tekstide vormindamine

Kui oled kodulehele teksti kirjutanud ja soovid kirjastiili muuta, siis aktiveeri tekst ja vali rippmenüüst Format > Font endale sobiv kirjastiil.

Terve teksti aktiveerimiseks vajuta klahvidele Ctrl ja A

Arvutiekraanilt on kõige parem lugeda Arial, Helvetica ja Verdana stiilis kirjutatud teksti

Teksti suurust saab muuta rippmenüüst Format > Size, värvi saab muuta Format > Text Color...

Pealkirjade jaoks kasuta vastavalt tasemele Heading 1 (esimese astme pealkiri), Heading 2 (teise astme pealkiri) jne. Tavalise teksti jaoks kasuta Body Texti.

Teksti laadi valimine

Tekstide joondamine toimub sarnaselt tekstitöötlusprogrammidega. Menüüribal võid leida vormindamiseks vajalikud nupud, millest esimene joondab teksti vasakule, teine keskele, kolmas paremale ja neljas rööpselt.

Kodulehe tekstide joondamine

Teksti saab muuta paksuks vajutades esimest nuppu, kaldkirja saab teha teise nupu abil ning allajoonitud teksti jaoks tuleb vajutada kolmandat nuppu.

Tekst stiili valimine

Tekstide laiust ja paiknemist saad muuta joonlaua abil, mis asub teksti kohal. Selleks tuleb minna joonlaua otsa peale nii, et hiire kursor muutuks mustaks nooleks, ning timmida välja endale sobiv tekstide laius ning paigutus.

Teksti laiuse ja paiknemise seadistamine

Piltide lisamine

Kui Sul on kodulehele mõni pilt lisada, siis seda saab teha, avades rippmenüüst Insert > Image...

Pildi lisamine koduleheküljele

Avanenud dialoogiaknast vajuta kataloogikujulisele nupule Choose File..., otsi oma kodulehe kaustast üles pilt, mille oled sinna eelnevalt salvestanud. Nüüd tuleb täita väli Alternate text. See on tekst, mida kuvatakse siis, kui pildi laadimine ei õnnestu. Kui Sa ei soovi alternatiivset teksti sisestada, tee märge Don't use alternative text ette.

Pildi atribuudid

Salvestamine

Nüüd, kui esmased asjad on kodulehekülje esilehe juures paika pandud, võiks selle salvestada. Selleks ava rippmenüüst File > Save.

Esmakordsel salvestamisel avaneb dialoogiaken, mis küsib lehe pealkirja. Lehe pealkiri ilmub veebilehitseja ülesse sinisele ribale (näiteks konkreetselt sellel lehel on pealkiri Kodulehekülje tegemine tasuta vahenditega > Kodulehekülje valmistamine). Kui oled pealkirja sisestanud ning vajutanud nupule OK, küsitakse, kuhu soovid faili salvestada ja mis nimega. Salvesta fail oma kodulehe kasuta ning kuna tegemist on esilehega, siis pane selle nimeks kindlasti index.html.

Esilehe faili nimi peab olema index.html. Selle nime järgi saab veebiserver aru, et tegemist on esilehega ning minnes kodulehe aadressile avab selle lehe automaatselt.

Kodulehe salvestamine

Kui tahad näha, milline Sinu (veel poolik) kodulehekülg internetis välja näeks, siis vali programmiakna allosas asuvast järjehoidjate reast valik Preview. Et lehe kallal edasi töötada, tuleks valida tagasi Normal.

Kodulehe eelvaade

Alamlehtede valmistamine

Tavaliselt ei koosne koduleht ainult ühest lehest vaid pealehest (index.html failist) ja alamlehtedest.

Uut (alam)lehte saad valmistama hakata, valides rippmenüüst File > New.

Uue alamlehe tegemine

Seejärel avaneb dialoogiaken, kus tuleb vajutada nupule Create.

Nüüd tekib uus järjehoidja (tab), kus saad hakata alamlehte valmistama.

Uus kodulehe alamleht järjehoidjal

Alamlehtede salvestamisel pea meeles, et faili nimi ei tohiks sisaldada tühikuid ega täpitähti. Tühikute asemel võiks kasutada sidekriipsu näiteks kodulehekulje-valmistamine.html.

Lehtede ühendamine linkidega

Kui ka alamlehed on valmis ja salvestatud, siis tuleks avaleht ja alamlehed omavahel ühendada ehk linkida. Selleks aktiveeri avalehel tekst või pilt, millest tahad linki teha, ja vali rippmenüüst Insert > Link ...

Seejärel avaneb dialoogiaken, kus tuleb vajutada kataloogi kujulisele nupule, millele hiirekursoriga peale minnes tekib kollane kastike tekstiga Choose File.... Nüüd otsi oma kodulehe kaustast üles lehekülg (HTML-fail), millele link peaks suunama.

Lehtede ühendamine linkidega

Kui soovid, et lingile vajutades avaneks leht uues aknas, siis tee linnuke teksti Link is to be opened ette.

Et link viiks mõnele teisele kodulehele (näiteks http://www.granaat.ee/opetus), siis tuleks see aadress kirjutada väljale Link Location.

Link kellegi teise kodulehele

Kui soovid oma e-posti aadressi lingiks teha, siis tuleks toimida sarnaselt tavalingi tegemisele: aktiveeri tekst või pilt, millelt peaks saama kirja kirjutada, vali rippmenüüst Insert > Link..., kirjuta välja Link Location e-posti aadress, tee linnuke ette The above is an email address.

Et kodulehele link tekiks, tuleb veel vajutada nupule OK.

Kuna spämmirobotid korjavad kodulehekülgedelt e-postiaadresse, et sinna rämpskirju saata, siis tuleks seal, kus vähegi võimalik, kasutada tagasisidevormi, millelt külastaja saab Sulle otse kodulehelt kirja saata.

Tagasisidevormist tuleb juttu siin.


« Ettevalmistused kodulehe valmistamiseks | Kodulehekülje valmistamine | Koduleht internetti »

Kodulehe tegemine

Tasuta tarkvara