You are on page 1of 70

saqarTvelos teqnikuri universiteti

mmmm kiknkiknkiknkiknaZeaZeaZeaZe,,,, e.e.e.e. CikCikCikCikaSuaaSuaaSuaaSua,,,, TTTT kkkkaiaiaiaiSSSSauriauriauriauri,,,, TTTT JvJvJvJvaaaaninininiaaaa,,,, l.l.l.l. petripetripetripetriaSviliaSviliaSviliaSvili

v

e

b

d

i

z

a

i

n

i

HTMLHTMLHTMLHTML &&&& JAVAJAVAJAVAJAVA SCRIPTSCRIPTSCRIPTSCRIPT

damxmare saxelmZRvanelo

SCRIPTSCRIPTSCRIPTSCRIPT damxmare saxelmZRvanelo damtkicebulia stu-s saredaqcio-sagamomcemlo sabWos mier

damtkicebulia stu-s saredaqcio-sagamomcemlo sabWos mier

Tbilisi

2006

- 1

-

wigni warmoadgens damxmare saxelmZRvanelos saganSi `veb gverdebis proeqtireba~. masSi aRweri-

lia HTML (Hyper Text Markup Language)

markirebis enis SesaZleblobebi, stilebis Seqmna da gamoyeneba CSS (Cascading Style Sheet) enis saSualebiT

da Java script daprogramebis enis safuZvlebi. saxelmZRvanelo gaTvaliswinebulia saqarTve- los teqnikuri universitetis informatikisa da mar- Tvis sistemebis fakultetis studentebisaTvis da aseve mkiTxvelTa farTo wrisaTvis romlebic dain- teresebulni arian veb dizainiT.

hiperteqstebis

recenzentebi: prof. z. gasitaSvili doc. b. kiziria

© gamomcemloba @@`teqnikuri universiteti~ 2006

- 2 -

WEB gverdebisgverdebisgverdebisgverdebis proeqtirebaproeqtirebaproeqtirebaproeqtireba

SesavaliSesavaliSesavaliSesavali

rogorc cnobilia internetSi arsebuli nebis- mieri informacia, romlTa daTvaliereba SesaZlebe- lia internet-brauzerebis saSualebiT, inaxeba rome- lime Web serverze saitis saxiT. Web saiti Sedgeba Web gverdebisagan, romelTa aRwera (Seqmna) da erTmaneTTan dakavSireba xdeba html (Hyper Text Markup Language) hiperteqstebis markirebis enis saSualebiT. html ar warmoadgens programirebis enas, misi saSu- alebiT xdeba mxolod Web gverdebis Seqmna da redaqtireba.

rararara arisarisarisaris saWirosaWirosaWirosaWiro WEB gverdisgverdisgverdisgverdis SesaqmneladSesaqmneladSesaqmneladSesaqmnelad

Web gverdis aRwera xdeba nebismier teqstur redaqtorSi. amisaTvis vxsniT mag: teqstur redaq- tors NotePad (Start+Programs+Accessories+NotePad) da vkrifavT html dokuments (konkretulad ras, aRweri- lia Semdeg TavebSi);

dokuments (konkretulad ras, aRweri- lia Semdeg TavebSi); Cven mier Seqmnili dokumenti damaxsovrebis dros teqsturi

Cven mier Seqmnili dokumenti damaxsovrebis dros teqsturi failis saxiT rom ar Caiweros diskze, amisaTvis vaniWebT fails html an htm

- 3 -

gafarToebas. e.i. damaxsovrebis dros File name-Si vkrifavT failis_saxels.html mag: index.html;

name- Si vkrifavT failis _ saxels. html mag : index.html ; Cven mier Seqmnili Web gverdis

Cven mier Seqmnili Web gverdis daTvaliereba xdeba internet-brauzeris saSualebiT. e.i SevdivarT Microsoft Explorer an Netscape Navigator-Si da viZaxebT fails File+Open+Browse da virCevT Sesabamis fails.

fails File+Open+Browse da virCevT Sesabamis fails. SeniSvna : Tu dagvWirda Web gverdis redaqtireba vbrundebiT

SeniSvna: Tu dagvWirda Web gverdis redaqtireba vbrundebiT teqstur redaqtorSi (NotePad) sadac avkrifeT programa, varedaqtirebT Sesabamis dokuments da vimaxsovrebT. (internet-brauze- ridan html dokumentis gaxsna xdeba konteqsturi meniudan View Source brZanebiT.)

- 4 -

internet-brauzerSi dokumentis ganaxleba xdeba

instrumentebis velidan

dokumentis ganaxleba xdeba instrumentebis velidan Refresh brZanebiT. ZiriTadiZiriTadiZiriTadiZiriTadi

Refresh brZanebiT.

ZiriTadiZiriTadiZiriTadiZiriTadi mcnebebimcnebebimcnebebimcnebebi

nebismieri html dokumenti Sedgeba internet- brauzerSi gamosatani teqstisagan da mmarTveli sim- boloebisagan anu tegebisagantegebisagan.tegebisagantegebisagan tegitegitegitegi es aris brZaneba romelic moTavsebulia < da > simboloebs Soris (mag. <p>) da gansazRvravs mis Semdeg warmodgenili teqstis an grafikuli gamosaxulebis mdebareobas, zomas, fers da a. S. rogorc wesi gamoiyeneba <tegis<tegis<tegis<tegis_saxeli>saxeli>saxeli>saxeli> ---- gam- xsneli da </tegis</tegis</tegis</tegis_saxesaxeli>saxesaxeli>li>li> ---- damxuravi tegi, romel- Ta saSualebiTac xdeba ama Tu im brZanebis moqmede- bis aris gansazRvra. (arsebobs gamonaklisi tegebi romlebisTvisac ar gamoiyeneba damxuravi tegi)

TiTqmis yvela tegi Sedgeba ori nawilisagan:

tegistegistegistegis saxelisaxelisaxelisaxeli - romelic gansazRvrava Tu romel obieqtze xdeba moqmedeba; atributiatributiatributiatributi –––– miuTiTebs ra moqmedeba unda Sesrul- des aRniSnul obieqtze.

tegis saboloo formati:

<tegis<tegis<tegis<tegis_saxelisaxelisaxelisaxeli atributi1=”mniSvneloba”atributi1=”mniSvneloba”atributi1=”mniSvneloba”atributi1=”mniSvneloba”

atributi2=”mniSvneloba”>atributi2=”mniSvneloba”>atributi2=”mniSvneloba”>atributi2=”mniSvneloba”>

moqedebis veli

</tegis</tegis</tegis</tegis_saxeli>saxeli>saxeli>saxeli>

- 5 -

mag.: <font face=acadnusx size=4 color=red> saqarTvelos teqnikuri universiteti </font>

sabazosabazosabazosabazo tegebitegebitegebitegebi

<HTML>

</HTML> - aris Web dokumentis pirveli

<HEAD>

da bolo tegi, romelic miuTiTebs rom aRniSnuli faili aris web gverdi da ara ubarlo teqsti. </HEAD> - saTauris bloki, sadac iwereba

<TITLE>

zogadi informacia veb gverdis Sesaxeb. </TITLE> - tegebs Soris iwereba dokumen-

<BODY>

tis saxeli, romelic Semdgom gamoisaxeba brauzeris saTauris velSi. </</</</BODY> - tegi xsnis dokumentis tans, sadac aRiwereba mTlianad dokumenti (web gverdis Semcveloba).

html dokumentis zogadi struqtura:

<HTML> <HEAD> <TITLE> dokumentis saxeli </TITLE> </HEAD> <BODY> dokumentis Semcveloba </BODY> </HTML>

mag:

<html> <head> <title> My first page

Semcveloba </BODY> </HTML> mag: <html> <head> <title> My first page - 6 -
Semcveloba </BODY> </HTML> mag: <html> <head> <title> My first page - 6 -
Semcveloba </BODY> </HTML> mag: <html> <head> <title> My first page - 6 -

- 6 -

</title> </head> <body> Hello World! </body> </html> Tu BODY tegSi ar miuTiTeT Web gverdis fonis feri, avtomaturad irCevs TeTr fons. SesaZlebelia fonis Secvla Bgcolor atributiT.

arsebobs feris miTiTebis ori gza:

1. feris inglisurenovani saxelis miTiTebiT <body bgcolor=gray>

2. feris eqvscifriani kodis miTiTebiT <body bgcolor=#808080>

mag:

<html> <title>My first page </title> <body bgcolor=gray> Hello World! </body> </html>

first page </title> <body bgcolor=gray> Hello World! </body> </html> - 7 -

- 7 -

abzacisabzacisabzacisabzacis formatirebaformatirebaformatirebaformatireba

<P> - tegi xsnis axal abzacs, sadac SeiZleba movaTavsoT rogorc teqsti, aseve grafikuli gamosa- xuleba. ALIGN atributis saSualebiT xdeba mdebare- obis gansazRvra. am atributs SeiZleba mieniWos Sem- degi mniSvnelobebi:

LEFT-marcxniv, CENTER-centri, RIGHT-marjvniv.

mag.: <<<<P ALIGN=CENTER>>>>

SeniSvna: ALIGN atributis sabazo mniSvnelobaa LEFT-marcxniv, e.i. Tu gvinda abzacis marcxniv gasworeba, maSin SegviZlia ar miuTiToT es atributi da <P ALIGN=LEFT>-is nacvlad dav- werT <P>.

<<<<BR>>>> ---- tegis saSualebiT xdeba axal striqonze gadasvla. am dros ucvleli rCeba wina abzacSi mi- TiTebuli mdebareoba. <BR> tegis daxurva ar aris saWiro e.i. </BR> - arasworia.

<BLOCKQUOTE> - tegis saSualebiT xdeba teq- stis tabulacia.

mag:

<html> <title> My second page </title>

- 8 -

<body> <p align=center> AUTOBIOGRAPHY </p> <p align=left> First name: Eka <br>

Last name: Chikashua </p> <blockquote>

Last name: Chikashua </p> <blockquote> 15.10.2001 </ blockquote > </body>

15.10.2001

</ blockquote >

</body>

</html>

teqstisteqstisteqstisteqstis formatirebaformatirebaformatirebaformatireba

FONT tegis saSualebiT xdeba Sriftis aRwera. am tegs gaaCnia Semdegi atributebi:

FACE – Sriftis dasaxeleba, SIZE – zoma, COLOR – feri.

mag.: <font face=acadnusx size=4 color=red>

Sriftis sabazo mniSvnelobaa - Times New Roman. e.i. im SemTxvevaSi Tu ar aris miTiTebuli Sriftis dasaxeleba avtomaturad iwereba inglisurad.

- 9 -

aseve SesaZlebelia erTdroulad miuTiToT ra-

modenime Srifti. <font face=”I Srifti, II Srifti

im SemTxvevaSi Tu momxmareblis kompiuterze ar aris dayenebuli I Srifti, web gverdis Sesabamis nawilis gamoitana moxdeba Semdegi SriftiT da. a.S. mag.: <<<<font face=”AcadNusx, DumbaNusx”> Sriftis zomis sabazo mniSvnelobaa – 3. arsebobs zomis miTiTebis ori xerxi: absolitu- ri <font size=4> da SedarebiTi <font size=+1>.

”>

absolituri

1

2

3

4

5

6

7

mniSvneloba

SedarebiTi

-2

-1

 

+1

+2

+3

+4

mniSvneloba

-

 

6pt

8pt

10pt

12pt

14pt

18pt

27pt

Sriftis feris sabazo mniSvnelobaa – Savi.

mag:

<html> <title> GTU </title> <body> <p> Georgian Technical University <br> <font size=5>Georgian Technical University</font> <br> <font face=acadnusx>saqarTvelos teqnikuri universiteti </font> <br> <font face=acadnusx size=5>saqarTvelos teqnikuri universiteti </font> </p> </body> </html>

size=5>saqarTvelos teqnikuri universiteti </font> </p> </body> </html> - 10 -

- 10 -

SesaZlebelia HTML dokumentis sabazo para- metrebis Secvla <BaseFont> tegis saSualebiT, rome- lic unda moTavsdes <Body> tegis Semdeg.

mag:

<html> <title> GTU </title> <body>

<<<<BaseFont face=acadnusx size=4>

<p> saqarTvelos teqnikuri universiteti <br><Font face=arial> Georgian Technical University</font>

ganxilul magaliTSi vinaidan sabazo Sriftad arCeuli gvaqvs acadnusx avtomaturad teqsti veb saitze gamoCndeba qarTulad da im SemTxvevisaTvis Tu gvWirdeba inglisuri teqsti unda miuTiToT Sesabamisi Srifti.

SriftisSriftisSriftisSriftis stilebistilebistilebistilebi

 

tegi

dasaxeleba

funqcia

<I>

</I>

 

daxrili

<EM>

</EM>

Italic

<B>

</B>

Bold

muqi

<STRONG>

</STRONG>

<U>

</U>

Underline

xazgasmuli

<SUB>

</SUB>

subscript

zedaindeqsi

<SUP>

</SUP>

superscript

qvedaindeqsi

horizontalurihorizontalurihorizontalurihorizontaluri xazixazixazixazi

- 11 -

saWiroebis SemTxvevaSi web gverdis horizonta- luri gayofa SesaZlebelia `horizontaluri xazis~ gamoyenebiT, romlis aRwera xdeba <HR> - Horizontal rule tegiT. SesaZlebelia xazis zomebis miTiTeba Semdegi atributebis daxmarebiT:

SIZE - xazis sisqe; WIDTH – xazis sigrZe.

gamoiyeneba xazis sigrZis miTiTebis ori varianti:

1. ricxviTi mniSvneloba, romelic mieTiTeba piqse- lebSi (1 Pixel = 1 wertili ekranze.

2. procentuli mniSvneloba (%), romelic miuTiTebs ekranis ra nawili daikavos xazma.

<hr width=100> <hr width=70%> <hr width=50% size=7>
<hr width=100>
<hr width=70%>
<hr width=50% size=7>

xazis mdebareobis arCeva SesaZlebelia ALIGN=Left / Center / Right atributis saSualebiT. (avtomaturad xazis Casma xdeba ekranis centrSi). xazis stilis Secvla xdeba NOSHADE atribu- tiT, romelic xsnis xazis efeqts.

<hr size=7> <hr size=7 NOSHADE>
<hr size=7>
<hr size=7 NOSHADE>

SeniSvna: <HR> tegs

ar gaaCnis damxuravi tegi.

e.i. </HR> - arasworia.

- 12 -

laboratoriulilaboratoriulilaboratoriulilaboratoriuli samuSaosamuSaosamuSaosamuSao

laboratoriulilaboratoriulilaboratoriulilaboratoriuli samuSaosamuSaosamuSaosamuSao - 13 -

- 13 -

grafikuligrafikuligrafikuligrafikuli obieqtisobieqtisobieqtisobieqtis CasmaCasmaCasmaCasma WEB gverdzegverdzegverdzegverdze

Web gverdis srulyofisaTvis garda teqsturi informaciisa gamoiyeneba grafikuli obieqtebi (*.gif an *.jpg formatis nebismieri faili). grafikuli failis HTML dokumentSi Casma xdeba Semdegi tegiT:

<IMG SRC=srulisrulisrulisruli gzagzagzagza failamdefailamdefailamdefailamde> im SemTxvevaSi Tu HTML dokumenti da grafiku- li faili moTavsebulia erT saqaRaldeSi failis sruli gzis nacvlad mieTiTeba mxolod failis saxeli.

<IMG SRC=failisfailisfailisfailis saxelisaxelisaxelisaxeli> e.i. <IMG SRC=*.GIF > an <IMG SRC=*.JPG>

ganvixiloT SemTxvevei roca HTML dokumenti da grafikuli faili ar aris moTavsebuli erT saqa- RaldeSi.

picture3.g <img src=Image/New/picture3.gif> picture2.g <img src=Image/picture2.gif> Index.htm - 14 -
picture3.g
<img src=Image/New/picture3.gif>
picture2.g
<img src=Image/picture2.gif>
Index.htm
- 14 -
picture1.g
<img src=picture1.gif>

1)1)1)1) Tu suraTi da HTML dokumenti moTavsebulia erT saqaRaldeSi, maSin vuTiTebT mxolod suraTis saxels:

<img src=failisfailisfailisfailis saxelisaxelisaxelisaxeli>

mag.

<img src=picture1.gif>

2) Tu suraTi moTavsebulia HTML dokumentis saqa- Raldis qvesaqaRaldeSi, maSin mieTiTeba qvesaqa- Raldis saxeli da Semdeg suraTis saxeli.

<img src=qvesaqaRaldeqvesaqaRaldeqvesaqaRaldeqvesaqaRalde/failisfailisfailisfailis saxelisaxelisaxelisaxeli>

mag.

<img src=Image/picture2.gif>

an

<img src=Image/New/picture3.gif>

3) Tu suraTi moTavsebulia

HTML dokumentis

saqaRaldis gareT,

/ xdeba saqaRaldidan gasvla.

<img src= /failis

mag.

/failis

/failis

/failis saxelisaxelisaxelisaxeli>

<img src=Image/picture4.gif>

4) Tu suraTi moTavsebulia HTML dokumentis saqa- Raldis gareT, sxva saqaRaldeSi, maSin xdeba

mere mieTiTeba im saqa-

Raldis saxeli romelSic suraTia moTavsebuli da bolos suraTis saxeli.

saqaRaldidan gasvla (

/),

<img src= /saqaRalde/

mag.

/saqaRalde/failis

/saqaRalde/failisfailisfailis saxelisaxelisaxelisaxeli>

/saqaRalde/

<img src= /Old/picture5.gif>

SesaZlebelia suraTis

da

zomebis

miTiTeba

- 15 -

Width Height
Width
Height

Border

suraTis Casma CarCoSi Semdegi atributebis saSu- alebiT:

Width=ricxvi an % - sigrZe; Height=ricxvi an % ---- sigane. Border=ricxvi – CarCos sisqe

suraTissuraTisasuraTissuraTisaaa dadadada teqstisteqstisteqstisteqstis urTierTmedebareobaurTierTmedebareobaurTierTmedebareobaurTierTmedebareoba

im SemTxvevaSi Tu ar miuTiTeT suraTis mimarT teqstis mdebareoba avtomaturad maTi gasworeba xdeba qvemodan.

mag.

.

<img src=emblem.gif> <font face=acadnusx>saqarTvelos teqnikuri universiteti

.

.

saqarTvelos teqnikuri universitetiface=acadnusx>saqarTvelos teqnikuri universiteti . . Tu gvinda mdebareobis Secvla suraTis aRmwer tegSi unda

Tu gvinda mdebareobis Secvla suraTis aRmwer tegSi unda miuTiToT atributi align romelsac SeiZ-

leba mivaniWoT mniSvnelobebi middle - centri da top- zemoT.

mag.

.

<img src=emblem.gif align=middle> <font face=acadnusx>saqarTvelos teqnikuri universiteti

.

.

saqarTvelos teqnikuri universiteti. < img src=emblem.gif align=middle > <font face=acadnusx>saqarTvelos teqnikuri universiteti . . - 16 -

- 16 -

. <img src=emblem.gif align=top> <font face=acadnusx>saqarTvelos teqnikuri universiteti

.

.

face=acadnusx>saqarTvelos teqnikuri universiteti . . saqarTvelos teqnikuri universiteti zemoT aRniSnul samive

saqarTvelos teqnikuri universiteti

zemoT aRniSnul samive SemTxvevaSi suraTis gaswvriv iwereba mxolod erTi striqoni (arCeul adgilas) da teqstis danarCenis striqonebi gadadis suraTis qvemoT.

mag.

<html>

<title>gtu</title>

<body>

<p>

<img src=gtu.jpg width=150> <font face=acadnusx>1922 wels Tbilisis saxelmwifo universitetSi

Seiqmna

safuZvelze 1928 wels calke gamoeyo saqarTvelos politeqnikur institutad. </p> <p>1992 wels saqarTvelos politeqnikur instituts daerqva saqarTvelos teqnikuri universiteti. </font> </p> </body> </html>

ganviTarebis

politeqnikuri

fakulteti,

romelic

misi

- 17 -
- 17 -

im SemTxvevaSi Tu gvinda suraTis gaswvriv dav- weroT ramodenimeramodenimeramodenimeramodenime stristriqonistristriqoniqoni,qoni maSin suraTis aRmwer tegSi unda miuTiToT atributi Align, romelsac SeiZleba miuTiToT Semdegi mniSvnelobebi left-mar- cxniv an right-marjvniv.

mag.:

<html>

<title>gtu</title>

<body>

<img src=gtu.jpg align=left> <p> <font face=acadnusx>

Tbilisis saxelmwifo universitetSi Seiqmna

politeqnikuri fakulteti, romelic misi ganviTarebis safuZvelze 1928 wels calke gamoeyo saqarTvelos politeqnikur institutad </p> <p>1992 wels saqarTvelos politeqnikur instituts daerqva saqarTvelos teqnikuri universiteti. </font> </p> </body> </html>

1922

wels

</p> </body> </html> 1922 wels Tu zemoT ganxilul programaSi SevcvliT suraTis mdebareobas

Tu zemoT ganxilul programaSi SevcvliT suraTis mdebareobas <img src=gtu.jpg align=right> maSin Sesabamis web gverds eqneba Semdegi saxe.

- 18 -

roca suraTis gverdiT aris ramodenime striqo - ni, pirvelad xdeba suraTis aRwera, Semdeg teqstis mdebareobis

roca suraTis gverdiT aris ramodenime striqo- ni, pirvelad xdeba suraTis aRwera, Semdeg teqstis

mdebareobis

<p align=left an center an right>,

Sriftis da

a.S.

mag.:

<html> <title>gtu</title> <body> <img src=gtu.jpg width=200 align=right> <p align=center> <font face=acadnusx size=4> saqarTvelos teqnikuri <br> universiteti <hr> </p> <p> acxadebs abiturientebis miRebas 2000-2001 saswavlo wlisaTvis </font> </p> </body> </html>

</font> </p> </body> </html> Tu ramodenime striqonis Semdeg gvinda suraTis gaswvriv

Tu ramodenime striqonis Semdeg gvinda suraTis gaswvriv darCes carieli adgili da axali striqoni gagrZeldes suraTis qvemoT unda gamoviyenoT tegi <br clear=all>.

mag.:

- 19 -

<html> <title>gtu</title> <body> <img src=gtu.jpg width=200 align=right> <p align=center> <font face=acadnusx size=4> saqarTvelos teqnikuri <br> universiteti <hr> <br clear=all> acxadebs abiturientebis miRebas 2000-2001 saswavlo wlisaTvis

</font>

</p>

</body>

</html>

</font> </p> </body> </html> horizontaluri da su raTida n daSorebis gansazRvra xdeba

horizontaluri

da

su

raTida

n

daSorebis gansazRvra xdeba Sesabamisad HSPACE da

vertikaluri

teqstamde

VSPACE atributebiT

mag.: <img src=gtu.jpg align=left HSPACE=25 VSPACE=10>

VSPACE=10

HSPACE=25
HSPACE=25

aseve SesaZlebelia suraTis Casma web gverdis fonad. amisaTvis BODY tegSi gamoiyeneba atributi background

<body background=failisfailisfailisfailis saxelisaxelisaxelisaxeli>

- 20 -

fonad SeiZleba CavsvaT grafikuli gamosaxule- ba jpg an gif gafarToebiT.

mag.:

<html> <title>gtu</title> <body background=pic.gif> <p> <img src=gtu.jpg width=200 align=right>

<p> <img src=gtu.jpg width=200 align=right> laboratoriulilaboratoriulilaboratoriulilaboratoriuli

laboratoriulilaboratoriulilaboratoriulilaboratoriuli samuSaosamuSaosamuSaosamuSao

- 21 -

CCamonaTvaliCCamonaTvaliamonaTvaliamonaTvali dadadada numeracianumeracianumeracianumeracia

</UL> (unordered

list) tegis saSualebiT. CamonaTvalis TiTeuli wevri aRiwereba <LI> (List Item) tegis saSualebiT. CamonaTavlis saTauris miTiTeba xdeba <LH> (List Head) tegiT.

CamonaTvalis aRwera xdeba <UL>

zogadad CamonaTvals aqvs Semdegi saxe:

<UL> <LH>siis saTauri <LI>I elementi <LI>II elementi <LI>III elementi </UL>

mag:

- 22 -

<HTML> <TITLE> Unordered Lists </TITLE> <BODY> <UL> <font face=acadmtavr size=4> <b> <LH> II kursi </b> </font> <font face=acadnusx size=4> <i> <LI> jg. 108040 <LI> jg. 108041 <LI> jg. 108042 <LI> jg. 108043 </i> </font> </UL> </BODY> </HTML>

</UL> </BODY> </HTML> SesaZlebelia CamonaTvalis stilis arCeva TYPE atributis

SesaZlebelia CamonaTvalis stilis arCeva TYPE atributis saSualebiT

CamonaTvalis stilis arCeva TYPE atributis saSualebiT <UL TYPE=disc> <UL TYPE=circle> <UL

<UL TYPE=disc>

<UL TYPE=circle>
<UL TYPE=circle>
<UL TYPE=square>
<UL TYPE=square>

im SemTxvevaSi Tu gvWirdeba CamonaTavlis gada- nomvra, mis aRwera unda movaxdinoT unda <OL> </OL> (ordered list) tegis saSualebiT.

mag:

<HTML> <TITLE> Unordered Lists </TITLE>

- 23 -

<BODY> <OL> <font face=acadmtavr size=4> <b> <LH> II kursi </b> </font> <font face=acadnusx size=4> <i> <LI> jg. 108040 <LI> jg. 108041 <LI> jg. 108042 <LI> jg. 108043 </i> </font> </OL> </BODY> </HTML>

</OL> </BODY> </HTML> SesaZlebelis numeraciis stilis arCeva TYPE atributis

SesaZlebelis numeraciis stilis arCeva TYPE atributis saSualebiT

numeraciis stilis arCeva TYPE atributis saSualebiT <OL TYPE=I> <OL TYPE=A> <OL TYPE=a>

<OL TYPE=I>

<OL TYPE=A>
<OL TYPE=A>
<OL TYPE=a>
<OL TYPE=a>

aseve SesaZlebelia numeraciis sawyisi cifris arCeva START atributis saSualebiT

- 24 -

<OL START=5> <OL TYPE=A START=3> <OL TYPE=I START=7>

<OL START=5>

<OL TYPE=A START=3>
<OL TYPE=A START=3>
<OL TYPE=I START=7>
<OL TYPE=I START=7>

laboratoriulilaboratoriulilaboratoriulilaboratoriuli samuSaosamuSaosamuSaosamuSao

- 25 -

moZravimoZravimoZravimoZravi striqonistriqonistriqonistriqoni

moZravi striqonis aRwera xdeba <MARQUEE> te- giT, romelsac gaaCnia Semdegi atributebi:

WIDTH:

samoZraosamoZraosamoZraosamoZrao arisarisarisaris sigrZesigrZesigrZesigrZe

HEIGHT:

samoZraosamoZraosamoZraosamoZrao arisarisarisaris simaRlesimaRlesimaRlesimaRle

BGCOLOR:

fonisfonisfonisfonis feriferiferiferi

HSPACE:

horizontalurihorizontalurihorizontalurihorizontaluri dadadada vertikalurivertikalurivertikalurivertikaluri daSorebadaSorebadaSorebadaSoreba samoZraosamoZraosamoZraosamoZrao arisarisarisaris irgvlivirgvlivirgvlivirgvliv

VSPACE:

mag.:

- 26 -

<marquee width=400 height=50 bgcolor=gray> <font face=acadmtavr size=4 color=white> <b>saqarTvelos teqnikuri universiteti</b> </font> </marquee>

universiteti</b> </font> </marquee> moZrav striqonSi teqstis moZraobis mimarTu - lebis, stilis,

moZrav striqonSi teqstis moZraobis mimarTu- lebis, stilis, raodenobis, siCqaris da gadaadgile- bis bijis gansazRvra xdeba Semdegi atributebiT:

DIRECTION

moZraobismoZraobismoZraobismoZraobis mimarTulebamimarTulebamimarTulebamimarTuleba

LEFT - marcxniv RIGHT - marjvniv UP - zeviT DOWN - qveviT

BEHAVIOR

moZraobismoZraobismoZraobismoZraobis stilistilistilistili

SCROLL - moZraoba meordeba ganuwyvetliv Sesabamisi erTi mimarTulebiT

 
 
meordeba ganuwyvetliv Sesabamisi erTi mimarTulebiT     SLIDE – moZraoba sruldeba mxolod erTjer Sesabamisi
meordeba ganuwyvetliv Sesabamisi erTi mimarTulebiT     SLIDE – moZraoba sruldeba mxolod erTjer Sesabamisi
 

SLIDE – moZraoba sruldeba mxolod erTjer Sesabamisi mimarTulebiT

SLIDE – moZraoba sruldeba mxolod erTjer Sesabamisi mimarTulebiT

ALTERNATE - moZraoba

meordeba ganuwyvetliv urTierTsapirispiro mimarTulebiT

ALTERNATE - moZraoba meordeba ganuwyvetliv urTierTsapirispiro mimarTulebiT
ALTERNATE - moZraoba meordeba ganuwyvetliv urTierTsapirispiro mimarTulebiT

LOOP

gansazRvravsgansazRvravsgansazRvravsgansazRvravs moZraobismoZraobismoZraobismoZraobis ganmeorebisganmeorebisganmeorebisganmeorebis raodenobasraodenobasraodenobasraodenobas

SCROLLDELAY

gansazRvravsgansazRvravsgansazRvravsgansazRvravs moZraobismoZraobismoZraobismoZraobis siCsiCqaressiCsiCqaresqaresqares

- 27 -

SCROLLAMOUNT

gansazRvravsgansazRvravsgansazRvravsgansazRvravs gadaadgilebisgadaadgilebisgadaadgilebisgadaadgilebis bijs.bijs.bijs.bijs.

mag.:

<marquee width=200 height=150 bgcolor=gray hspace=50 vspace=20 direction=up behavior=scroll loop=6 scrolldelay=100

scrollamount=25>

<font face=acadmtavr size=4 color=white> <b>saqarTvelo</b></font> </marquee>

teqsti moZraobs qvevidan zeviT da moZraoba ganmeordeba 6-jer

200
200
laboratoriulilaboratoriulilaboratoriulilaboratoriuli samuSaosamuSaosamuSaosamuSao 150
laboratoriulilaboratoriulilaboratoriulilaboratoriuli samuSaosamuSaosamuSaosamuSao
150

- 28 -

cxrilebicxrilebicxrilebicxrilebi

im SemTxvevaSi Tu ukve SeqmeniT ramodenime html dokumenti, aucileblad waawydebodiT problemebs, Web gverdze teqstisa da grafikuli obieqtebis sasurvel adgilze ganlagebis dros. swored am problemis gadasaWrelad da Web gverdis mosawes- rigeblad gamoiyeneba cxrilebi. ganvixiloT tegebi, romelTa sasualebiTac xde- ba cxrilis ageba. rogorc viciT cxrili Sedgeba striqonebisagan da am striqonSi arsebuli ujrebi- sagan. aqedan gamomdinare sxvadasxva tegis saSuale- biT xdeba calkeuli elementebis aRwera:

- 29 -

<TABLE> ---- cxrili,cxrili,cxrili,cxrili, <TR> ---- striqoni,striqoni,striqoni,striqoni, <TD> ---- ujra.ujra.ujra.ujra.

<TABLE>

<TR>

<TD>

</TD>

<TD>

</TD>

<TD>

</TD>

</TR>

<TR>

<TD>

</TD>

<TD>

</TD>

<TD>

</TD>

</TR>

<table width=80> <tr> <td>Cell1</td> <td>Cell2</td> </tr>
<table width=80>
<tr>
<td>Cell1</td> <td>Cell2</td>
</tr>
<tr>
<td>Cell3</td> <td>Cell4</td>
</tr>
</table>

</TABLE>

mag.:

</tr> </table> </TABLE> mag.: cxrilis formatirebisaTvis gamoiyeneba Semde- gi atributebi:

cxrilis formatirebisaTvis gamoiyeneba Semde- gi atributebi:

1. Border=ricxviricxviricxviricxvi ---- CarCosCarCosCarCosCarCos (xazebis)(xazebis)(xazebis)(xazebis) sisqesisqesisqesisqe

<table border=2>

<table border=7>

<table border=2> <table border=7> 2. Width= ricxviricxviricxviricxvi anananan %%%% ----
<table border=2> <table border=7> 2. Width= ricxviricxviricxviricxvi anananan %%%% ----

2. Width=ricxviricxviricxviricxvi anananan %%%% ---- cxriliscxriliscxriliscxrilis sigrZesigrZesigrZesigrZe <table border=2 width=200>

anananan %%%% ---- cxriliscxriliscxriliscxrilis sigrZesigrZesigrZesigrZe <table border=2 width=200> - 30 -

- 30 -

<table border=2 width=80%>

<table border=2 width=80%> 3. Height= ricxviricxviricxviricxvi anananan %%%% ---- cxriliscxriliscxriliscxrilis

3. Height=ricxviricxviricxviricxvi anananan %%%% ---- cxriliscxriliscxriliscxrilis simaRlesimaRlesimaRlesimaRle <table border=2 width=200 height=100>

<table border=2 width=200 height=100> 4. Bgcolor= ferisferisferisferis nomerinomerinomerinomeri

4. Bgcolor=ferisferisferisferis nomerinomerinomerinomeri anananan saxelisaxelisaxelisaxeli ---- fonisfonisfonisfonis feriferiferiferi

<table border=2 width=200 height=100 BGCOLOR=GRAY>

<table border=2 width=200 height=100 BGCOLOR=GRAY > 5. Background= failisfailisfailisfailis

5. Background=failisfailisfailisfailis saxelisaxelisaxelisaxeli ---- grafikuligrafikuligrafikuligrafikuli gamosagamosa-gamosagamosa--- xuxulexuxulelebislebisbisbis CasmaCasmaCasmaCasma fonadfonadfonadfonad

<table border=2 width=200 height=100 BACKGROUND=PIC.JPG>

border=2 width=200 height=100 BACKGROUND=PIC.JPG > 6. CellPadding= ricxviricxviricxviricxvi ----

6. CellPadding=ricxviricxviricxviricxvi ---- manZilimanZilimanZilimanZili ujrisujrisujrisujris sazRvrebidansazRvrebidansazRvrebidansazRvrebidan masSimasSimasSimasSi moTavsemoTavsebulmoTavsemoTavsebulbulbul teqstsateqstsateqstsateqstsa

- 31 -

TuTuTuTu grafikulgrafikulgrafikulgrafikul gamosaxulebamdegamosaxulebamdegamosaxulebamdegamosaxulebamde

<table border=2 width=200 height=100 CELLPADDING=15>

border=2 width=200 height=100 CELLPADDING=15 > 15pixels 7. CellSpasing= ricxviricxviricxviricxvi ----

15pixels

7. CellSpasing=ricxviricxviricxviricxvi ---- daSorebadaSorebadaSorebadaSoreba ujrebsujrebsujrebsujrebs SorisSorisSorisSoris

<table border=2 width=200 height=100 CELLSPACING=15>

15 pixsels
15 pixsels

ujrebisujrebisujrebisujrebis formatirebaformatirebaformatirebaformatireba

im SemTxvevaSi Tu gvinda cxrilis calke- uli svetebi da striqonebi iyos sxvadsxva zomis an gansxvavebuli foni hqondes calkeul ujrebs Sesabamis atributebis gamoyeneba SesaZlebelia ujris aRweris dros e.i. <TD> tegSi.

<table border=2 width=300 height=150> <tr> <td WIDTH=50 HEIGHT=50 BGCOLOR=GRAY>Cell1
<table border=2 width=300 height=150>
<tr>
<td WIDTH=50 HEIGHT=50 BGCOLOR=GRAY>Cell1 </td>
<td WIDTH=150>Cell2</td>
<td WIDTH=100>Cell3</td>
</tr>
<tr>
<td HEIGHT=100>Cell4</td>
50
150
100
<td>Cell5</td>
50
<td BGCOLOR=GRAY>Cell6</td>
</tr>
</table>
- 100 32 -

ujraSiujraSiujraSiujraSi teqstisateqstisateqstisateqstisa dadadada grafikuligrafikuligrafikuligrafikuli gamosaxulebisgamosaxulebisgamosaxulebisgamosaxulebis mdebareomismdebareomismdebareomismdebareomis arCevaarCevaarCevaarCeva

horizontaluri mdebareobis arCeva xdeba atri- butiT: Align= Left / Center / Right

<table border=2 width=80%> <tr> <td align=left>Cell1</td> <td
<table border=2 width=80%>
<tr>
<td align=left>Cell1</td>
<td align=center>Cell2</td>
<td align=right>Cell3</td>
</tr>
</table>

vertikaluri mdebareobis arCeva xdeba atri- butiT: Valign= Top / Middle / Bottom

<table border=2 height=150> <tr> <td valign=top>Cell1</td> <td
<table border=2 height=150>
<tr>
<td valign=top>Cell1</td>
<td valign=middle>Cell2</td>
<td valign=bottom>Cell3</td>
</tr>
</table>
valign=middle>Cell2</td> <td valign=bottom>Cell3</td> </tr> </table> - 33 -
valign=middle>Cell2</td> <td valign=bottom>Cell3</td> </tr> </table> - 33 -

- 33 -

mdebareobis sabazo mniSvnelobebia align=left da valign=middle

miTiTebebi:

1. cxrilis mdebareobis arCeva xdeva DIV tegiT:

<div align=left/center/right> 2. carieli ujris aRwera xdeba Semdegnairad:

<td> &nbsp; </td> 3. ujraSi gamoyenebuli tegebi ujris daxurvis Semdeg avtomaturad wyveten funqcionirebas, aqedan gamomdinare maTi daxurva aucilebeli ar aris.

mag.: <td><font face=acadnusx><i>siaxleebi:</td> <td>News</td>

<td>News</td> 4. teqstis Sriftisa da stilis aRwera saWiroa yvela ujraSi

4. teqstis Sriftisa da stilis aRwera saWiroa yvela ujraSi calcalke; 5. im SemTxvevaSi, Tu erT striqonze yvela ujraSi gvsurs fonis Secvala, maSin Sesabami- si atributi (bgcolor an background) yvela cal- keuli ujris nacvlad SegviZlia miuTiTos striqonis aRmwer tegSi (tr). aseve SeiZleba moviqceT mdebareobis arCevisas.

ujrebisujrebisujrebisujrebis gaerTianebagaerTianebagaerTianebagaerTianeba cxrilis agebis dros vawydebiT ujrebis

gamoiyeneba

gaerTianebis

saWiroebas.

amisaTvis

Semdegi atributebi:

Colspan=ricxviricxviricxviricxvi –––– svetebissvetebissvetebissvetebis gaerTianebagaerTianeba;gaerTianebagaerTianeba;;;

- 34 -

aRniSnuli ricxvi gansazRvravs gasaerTiane- beli ujrebis raodenobas

<table border=2 width=200> <tr> <td COLSPAN=3 align=center>Cell</td> </tr>
<table border=2 width=200>
<tr> <td COLSPAN=3 align=center>Cell</td> </tr>
<tr> <td>Cell1</td> <td>Cell2</td> <td>Cell3</td>
</tr>
</table>

Rowspan=ricxvi – striqonebis gaerTianeba.

<table border=2 width=100> <tr> <td ROWSPAN=5>Cell</td> <td>Cell1</td>
<table border=2 width=100>
<tr>
<td ROWSPAN=5>Cell</td>
<td>Cell1</td>
</tr>
<tr> <td>Cell2</td></tr>
<tr> <td>Cell3</td></tr>
<tr> <td>Cell4</td></tr>
<tr> <td>Cell5</td></tr>
</tr>
</table>
laboratoriulilaboratoriulilaboratoriulilaboratoriuli samuSaosamuSaosamuSaosamuSao

- 35 -

hiperkavSirebihiperkavSirebihiperkavSirebihiperkavSirebi

Web saitis Sesaqmnelad saWiroa calkeuli veb gverdis erTmaneTTan dakavSireba, kavSiri SeiZleba ganxorcieldes teqstis garkveul nawilze an gra- fikul gamosaxulebaze.

gamoiyeneba kavSiris gansaxorcielebis 4 tipi:

1.1.1.1. realurirealurirealurirealuri misamarTismisamarTismisamarTismisamarTis ((((URL)))) mqonemqonemqonemqone web saitsaitTansaitsaitTanTanTan dakavSirebadakavSirebadakavSirebadakavSireba

<A HREF=HTTP://misamarTimisamarTimisamarTimisamarTi> xxx </</</</A>>>>

xxx-iT aRniSnul adgilze iwereba teqsti, romlis saSualebiTac unda ganxorcieldes kavSiri,

- 36 -

e.i. Sesabamis teqstze mausis daWeriT moxdeba miTi- Tebul misamarTze arsebuli saitis gamoZaxeba.

mag.: me vswavlos stu-Si II kursze.

<font face=acadnusx size=4> me vcwavlob <a href=http://www.gtu.edu.ge> stu </a> -Si II kursze </font>

SeniSvna: (stu-ze mausis daWeriT unda moxdes stu-s web gverdis gamoZaxeba, romlis misamarTia

www.gtu.edu.ge)

2.2.2.2. momxmareblismomxmareblismomxmareblismomxmareblis miermiermiermier SeqmniliSeqmniliSeqmniliSeqmnili web gverdebisgverdebisgverdebisgverdebis erTerT-erTerT--- mamaneTTanmamaneTTanneTTanneTTan dakavdakavSirebadakavdakavSirebaSirebaSireba

<A HREF=failisfailisfailisfailis saxelisaxelisaxelisaxeli

mag.: jgufi #108040

1.

zaza

2.

maka

3.

nino

HTML> xxx </</</</A>>>>

<font face=acadnusx size=4> <i> jgufi #108040 </i> <ol> <li>zaza <li><a href=biography.html> maka </a> <li> nino </ol>

SeniSvna: (sityva maka-ze mausis daWeriT unda moxdes makas avtobiografiis gamoZaxeba, romelic winaswar aris aRwerili da damaxsovre-

buli biography.html failSi)

- 37 -

3.3.3.3. kavSiri,kavSiri,kavSiri,kavSiri, romlisromlisromlisromlis saSualebiTacsaSualebiTacsaSualebiTacsaSualebiTac SesaZlebeliaSesaZlebeliaSesaZlebeliaSesaZlebelia weweriweweririlisrilislislis gagzavnagagzavnagagzavnagagzavna aRniSaRniSnulaRniSaRniSnulnulnul safostosafostosafostosafosto misamarmisamar-misamarmisamar--- TzeTzeTzeTze

<A HREF=MAILTO:safostosafostosafostosafosto misamarTimisamarTimisamarTimisamarTi> xxx </</</</A>>>>

mag.: CvenTan dakavSireba SesaZlebelia el- fostis saSualebiT

<font face=acadnusx size=4> CvenTan dakavSireba SesaZlebelai <a href=mailto:info@gtu.ge> el-fostis </</</</a>>>> saSualebiT </font>

SeniSvna: (sityvaze `el-fostis~ mausis daWeriT unda moxdes werilis gagzavna info@gtu.ge misamarTze).

4. erTierTierTierTi failisfailisfailisfailis farglebSi,farglebSi,farglebSi,farglebSi, markeriTmarkeriTmarkeriTmarkeriT moniSnulmoniSnulmoniSnulmoniSnul adgilTanadgilTanadgilTanadgilTan dakavSidakavSireba;dakavSidakavSireba;reba;reba; imisaTvis rom, erTi failis farglebSi, sxva- dasxva adgilTan (striqonTan) moxdes kavSiris gan- xorcieleba, winaswar unda iqnas markeri dayenebuli Sesabamis adgilebze anu saxeli unda daerqvas aRniSnul adgilebs. markeris dayeneba xdeba <A NAME=markerismarkerismarkerismarkeris saxelsaxelisaxelsaxeliii> tegis saSualebiT. aRniSnuli tegi iwereba im teqstis win sadac gvinda markeris dayeneba.

gadasvla Sesabamis markerze xdeba Semdegi tegiT: <A HREF=#saniSnissaniSnissaniSnissaniSnis saxelisaxelisaxelisaxeli >

- 38 -

mag.: SevqmnaT `sakurso samuSao~-s web gver- di, romelic Sedgeba 3 Tavisagan. brauzeris fan- jaraSi Cans mxolod Tavi1-is Semcveloba, imisaT- vis rom Tavidan aviciloT danarCeni Tavebis Zebna da furcvla, Tavi1-ze mausis daWerT avtomaturad gamoitanos ekranze Tavi1-is Semcveloba; Tavi2-ze mausis daWeriT _ Tavi2-is Semcveloba; Tavi3-ze _ Tavi3-is Semcveloba

_ Tavi2-is Semcveloba; Tavi3-ze _ Tavi3-is Semcveloba <html> <title>sakurso</title>

<html> <title>sakurso</title> <body> <p align=center><font face=acadmtavr size=4><b> sakurso samuSao </b></font> </p> <p> <font face=acadnusx size=3> <a href=#1>Tavi1 </a>

- 39 -

<a href=#2>Tavi2 </a> <a href=#3>Tavi3 </a> </p> <p> <a name=1> <i>Tavi1 </i></a>

.

.

. . </p> <p> <a name=2> <i>Tavi2 </i></a>

.

.

.

</p> <p> <a name=3> <i>Tavi3 </i></a>

.

.

.

.

.

.

.

.

.

.

.

. . . . . . . . </p> </body> </html> .
.
.
.
.
.
.
. .
</p>
</body>
</html>
.

laboratoriulilaboratoriulilaboratoriulilaboratoriuli samuSaosamuSaosamuSaosamuSao

www.gtu.ge

- 40 -

stilebisstilebisstilebisstilebis SeqmnaSeqmnaSeqmnaSeqmna dadadada ggamoyenebaggamoyenebaamoyenebaamoyeneba

CSS - Cascading Style Sheet

CSS enis daxmarebiT SesaZlebelia veb gverdis sruli kontroli gacilebiT martivad da metad funqcionalurad, vidre es HTML enis saSualebiT xdeba.

- 41 -

arsebobs sami saxis stili:

1)1)1)1) INLINE STYLE SHEETS SidaSidaSidaSida stilistilistilistili. Sida stilis gamoyenebisas specialuri atribu- tebi (css Tvisebebi) iwereba pirdapir HTML tegSi.

mag. HTML-Si <font face=acadnusx size=14pt color=blue> saqarTvelos teqnikuri universiteti </font>

CSS-Si <font style="font-family: acadnusx; font-size: 14pt; color: blue"> saqarTvelos teqnikuri universiteti </font> rogorc vxedavT Sida stilebis gamoyenebiT miviReT ufro didi tegi vidre es HTML enis dros iyo. amitom maTi gamoyeneba xdeba mxolod im konkretuli SemTxvevisaTvis, roca gvinda iseTi Tvisebis gamoyeneba rac ar aris HTML-Si da aris CSS enaSi.

mag. asoebs Soris daSorebaa 7

teqnikuri

<font

style=letter-spacing:

7>

saqarTvelos

universiteti </font>

2)2)2)2) GLOBAL STYLE SHEETS globaluriglobaluriglobaluriglobaluri stilistilistilistili. am SemTxvevaSi stilis Tvisebebis aRwera xdeba veb dokumntis dasawyisSi (<body>-mde) da gamoyeneba xdeba mTliani dokumentis farglebSi.

mag. <html> <title>gtu</title> <style type=text/css> H1 {font-family: acadmtavr; font-size: 16; font-weight: bold} H2 {font-family: acadnusx; font-size: 16; color: white} body {background-color: gray} </style> <body>

- 42 -

<p align=center> <h1> saqarTvelos teqnikuri universiteti </h1> </p> <p align=center> <h2> saqarTvelos teqnikuri universiteti </h2> </p> </p> </body> </html>

</p> </p> </body> </html> 3) LINKED STYLE SHEETS -

3) LINKED STYLE SHEETS - dakavSirebulidakavSirebulidakavSirebulidakavSirebuli stilebistilebi.stilebistilebi dakavSirebuli saxis stilis gamoyeneba mizan- Sewonilia da mosaxerxebeli, roca vqmniT ramode- nime veb gverds, sadac viyenebT erTiaigive stilis elementebs. am SemTxvevaSi stilis aRwera xdeba calke failSi, romelsac Semdeg vimaxsovrebT css-formatiT anu file_name.css (mag. style.css) da Semdeg nebismieri veb gverdis aRweris dros SegviZlia gamoveyenoT style.css failSi arsebuli stilebi. mag. Tavdapirvelad vqmniT fails _ style.css sadac unda movaxdinoT stilebis aRwera.

<STYLE type="text/css"> body {background: gray; font-size: 12pt; font-family:

Acadnusx} .geo {font-family: acadnusx; font-size: 16; color: blue; font- style: italic} #bold {font-weight:bold} </STYLE>

HTML enaze veb geverdebis Seqmnis dros stilebis aRmwer failze (style.css) mimarTva xdeba <LINK rel="stylesheet" type="text/css" href="styles.css"> tegis saSualebiT (href atributSi mieTiTeba sruli gza).

- 43 -

SevqmnaT HTML faili (mag. index.html), sadac gamo- yenebuli iqneba stilebi style.css failidan

<html> <title> gtu </title> <LINK rel="stylesheet" type="text/css" href="styles.css"> <body> <p class=geo id=bold>saqarTvelos teqnikuri universiteti </p> </body> </html>

CSS struqturastruqturastruqturastruqtura

arsebobs stilebis gamocxadebis ramodenime meTodi:

1) selector {property: value} selector aris Cveulebriv HTML elementi, romelis garkveul Tvisebebs (property) eniWera konkretuli mniSvnelobebi (value).

mag. <html> <title>gtu</title> <style type=text/css> p {text-align: center} body {background-color: blue} h1 {font-family: acadmtavr; font-size: 16} </style> <body> <p> <h1> saqarTvelos teqnikuri universiteti </h1> </p> </body> </html>

2) .class_name {property: value}

- 44 -

klasis saxelad SegviZlia miuTiTod nebismieri sitva da Semdgom HTML elementSi am klasis gamoZa- xeba xdeba clas=clas_name atributiT.

mag. <html> <title>gtu</title> <style type=text/css> .back {background-image: url(

background-

repeat: no-repaet; background-position: center center} .title {font-family: acadmtavr; font-size: 16; font-weight:bold; text-align: center}

.geo {font-family: acadnusx; font-style: italic} </style> <body class=back> <p class=title> saqarTvelos teqnikuri universiteti </p> <p class=geo>acxadebs miRebas 2004-2005 saswavlo wlisaTvis </p> </body> </html>

/image/pic.jpg);

</body> </html> /image/pic.jpg); 3) #id_name {property: value} Tu gvWirdeba aRweril klass

3) #id_name {property: value} Tu gvWirdeba aRweril klass davamatoT rome- lime Tviseba, maSin vqmniT e.w. individualur stils – ID, romlis gamoyeneba HTML elementSi xdeba ID=id_name atributiT.

mag. <html> <title>gtu</title> <style type=text/css> .back {background-image: url(

background-repeat:

/image/pic.jpg);

no-repaet; background-position: center center}

- 45 -

.title { font-family: acadnusx; font-size: 16; font-weight: bold; text- align: center} #text {text-align: left; font-weight: normal; font-style: italic} </style> <body class=back> <p class=title> saqarTvelos teqnikuri universiteti </p> <p class=title id=text>acxadebs miRebas 2004-2005 saswavlo

wlisaTvis </p>

</body>

</html>

wlisaTvis </p> </body> </html> CSS TvisebebiTvisebebiTvisebebiTvisebebi Background

CSS TvisebebiTvisebebiTvisebebiTvisebebi

Background Properties – fonisfonisfonisfonis TvisebebiTvisebebiTvisebebiTvisebebi

Tviseba

mniSvnelobebi

aRwera

background-

color name

fonis feri

color

background-

url(*.jp)

suraTis Casma fonad

image

url(*.gif)

- 46 -

 

mag. url(pic.jpg)

 

background-

repeat

background- repeat

repeat

repeat-x

repeat-x

repeat-y

repeat-y

no-repeat

no-repeat

background-

top left

 

fonad Casmuli suraTis mdebareobis arCeva

position

top center

top right

center left

center center

center center

center right

bottom left

bottom center

bottom right

 

mag. center center

Fonts Properties - SriftisSriftisSriftisSriftis TvisebebiTvisebebiTvisebebiTvisebebi

 

Tviseba

mniSvnelobebi

 

mag.

 

aRwera

font-family

acadusx

 
font-family acadusx     Sriftia
 

Sriftia

arial

   

arCeva

font-size

small

 

teqstis

medium

 
medium  

- 47 -

large zomis arCeva ricxvobrivi mniSvlelobebi: mag: 10 12 20 30 font-style normal teqstis italic stili
large
zomis
arCeva
ricxvobrivi
mniSvlelobebi:
mag: 10
12
20
30
font-style
normal
teqstis
italic
stili
font-weight
normal
teqstis
bold
sisqe
bolder
lighter

Text Properties - teqstisteqstisteqstisteqstis TvisebebiTvisebebiTvisebebiTvisebebi

Tviseba mniSvnelobebi mag. aRwera color red; teqstis #ac34bf55 feri text- none xazgasmis decoration underline
Tviseba
mniSvnelobebi
mag.
aRwera
color
red;
teqstis
#ac34bf55
feri
text-
none
xazgasmis
decoration
underline
stili
overline
line-through
text-align
left
teqstis
center
mdebereo
right
ba
justify
omxrivi
gaswoeba
text-
ricxobrivi
abzacis
indent
mniSvneloba
dayeneba
mag: 20

- 48 -

letter- ricxobrivi asoebs spacing mniSvneloba Soris mag: 5 daSoerba word- ricxobrivi sityvebs spacing
letter-
ricxobrivi
asoebs
spacing
mniSvneloba
Soris
mag: 5
daSoerba
word-
ricxobrivi
sityvebs
spacing
mniSvneloba
Soris
mag: 10
daSoreba
text-
none
transform
capitalize
uppercase
lowercase

Border Properties - CarCarCosCarCarCosCosCos TvisebebiTvisebebiTvisebebiTvisebebi

Tviseba

mniSvnelobebi

aRwera

border-color

feris dasaxeleba

xazis feri

border-width

thin

viwro

xazis sisqe

medium

saSualo

thick

sqeli

ricxviTi mniSvneloba

border-style

none

xazis

double

stili

groove

ridge

inset

outset

border-top-color

zeda xazis feri sisqe stili

border-top-width

border-top-style

border-bottom -color border-bottom -width border-bottom –style

qveda xazis feri sisqe stili

border-left-color border-left -width

marcxena xazis feri sisqe

- 49 -

border-left –style

stili

border-right-color border-right -width border-right –style

marjvena xazis feri sisqe stili

Padding Properties –ujriujrisujriujrisss xazidanxazidanxazidanxazidan teqstamdeteqstamdeteqstamdeteqstamde daSorebdaSorebadaSorebdaSorebaaa

Padding-top

ricxviTi

zeda

mniSvneloba

daSoreba

Padding-

ricxviTi

qveda

bottom

mniSvneloba

daSoreba

Padding-left

ricxviTi

marcxena

mniSvneloba

daSoreba

Padding-right

ricxviTi

marjvena

mniSvneloba

daSoreba

Margin Properties - velisvelisvelisvelis TvisebebiTvisebebiTvisebebiTvisebebi

Tviseba

mniSvnelobebi

aRwera

margin-top

ricxviTi

zeda

mniSvneloba

daSoreba

margin-bottom

ricxviTi

qveda

mniSvneloba

daSoreba

margin-left

ricxviTi

marcxena

mniSvneloba

daSoreba

margin-right

ricxviTi

marjvena

mniSvneloba

daSoreba

laboratoriulilaboratoriulilaboratoriulilaboratoriuli samuSaosamuSaosamuSaosamuSao

sales@alta.com.ge

 

www.alta.ge

 

www.pasi.ge

- 50 -

samuSaosamuSaosamuSaosamuSao sales@alta.com.ge   www.alta.ge   www.pasi.ge - 50 -

daprogramebisdaprogramebisdaprogramebisdaprogramebis enaenaenaena JavaScript

JavaScript-i daprogramebis ena gamoiyeneba

HTML dokumen-

tebis Sesaqmnelad. enis mTavari aspeqti aris obieqtis cneba.

literalebiliteralebiliteralebiliteralebi

martivi monacemebi razedac SeiZleba agebuli iqnas prog- rama aris literalebi. mTeli tipis mudmivebi SeiZleba moce- muli iqnas aTobiTi TeqvsmetobiTi, an rvaobiTi formiT.

- 51 -

mTeli tipis aTobiTi mudmivebi SeiZleba warmodgenili iyos niSniT an niSnis gareSe magaliTad 15,125, -156 +3546. TeqvsmetobiTi ricxvebi Seicaven cifrebs 0-9-mde da asoebs a,b, c, d. e,f. TeqvsmetobiTi ricxvebi iwereba ricxvis win simboloTi 0x, magaliTad 0x25, 0xa1, 0xff. rvaobiTi ricxvebi Seicaven mxolod cifrebs 0-dan 7-is CaTvliT daiwereba ase 03, 0543. 011. aTwiladi ricxvebis Casawerad, rogorc yvela daprogra- mebis enaSi mZimis nacvlad gamoiyeneba wertili. magaliTad, 123. 45, -56.789. aTwiladi ricxvebis Casawerad gamoiyeneba eqsponencialu- ri forma magaliTad, ricxvi 0,000000234 romelic SeiZleba ase warmovadginoT 2.34x10 -7 JavaScript daprogramebis enaze Caiwereba

2.34e-7.

aTobiTi da mTeli mudmivebis garda arsebobs logikuri mudmivebi, romlebic iReben mxolod or mniSvnelobas WeSmari- ti – true zogierT warmodgenaSi - 1, mcdari- false – 0. striqonuli literali warmoadgens simboloebis Tanmim- devrobas romelic moTavsebulia ‘ ‘ an “ “ simboloebSi. magaliTad “ Sedegi” an ’Sedegi’. carieli striqonuli cvladi aRiniSneba ‘ ‘ an “ ” simboloebiT.

cvladicvladicvladicvladi

cvladebi gamoiyeneba monacemebis Sesanaxad. cvladebis aRwera xdeba identifikatoris saSualebiT. identifikatori aucileblad unda iwyebodes laTinuri alfavitis asoTi an gaxazvis simboloTi , Semdeg SeiZleba Cawerili iyos cifri an

gaxazvis simbolo. magaliTad test1, _my-test, test-1. cvladis tipi ganisazRvreba maTSi Senaxuli monacemebis tipiT, monacemebis tipis SecvliT icvleba cvladis tipi. cvladis gansazRvra xdeba sityviT var is aucileblad unda iyos gamoyenebuli cvladebis aRwerisas an inicializaciisas. magaliTad, var t1.

da is cnobili

gaxdeba mas Semeg rac mas mieniWeba mniSvneloba es ki xdeba miniWebis operatoris saSualebiT. magaliTad:

aq cvladis tipi ar aris gansazRvruli

var t1=345 am SemTxvevaSi t1 cvlads miniWebuli aqvs mniSvneloba 345.

- 52 -

cvladis mniSvneloba SeiZleba Seicvalos aseve miniWebis operatoriT. miniWebis operatori SeiZleba gamoyenebuli iyos nebismier adgilze da SeuZlia Secvalos ara marto monacemi aramed cvladis tipic. miniWebis operators aqvs saxe:

a=b sadac a- cvladia, b- gamosaxuleba. dasaSvebia cvladebis Semdebi aRwera:

var n=3245 var x=2.89 var p=true var s=”gamoTvla damTavrebulia” n da x cvladebs aqvT ricxviTi tipi, p-s aqvs logikuri tipi, xolo s-s string. JavaScript-Si gansazRvrulia aseve function tipi yvela standartuli funqciisaTvis da aseve momxmareblis mier gansazRvruli funqciebisaTvis. JavaScript-Si obieqtebs aqvT monacemTa tipi object. cvladebiscvladebiscvladebiscvladebis moqmedebismoqmedebismoqmedebismoqmedebis areareareare JavaScript-Si arsebobs ori tipis cvladebi globaluri da lokaluri. globaluri cvladi gansazRvrulia mTel programaSi, lokaluri cvladi gansazRvrulia mxolod konkretuli funqciis SigniT.

gamosaxulebagamosaxulebagamosaxulebagamosaxuleba

gamosaxuleba Sedgeba literalebisagan, cvladebisagan, moqmedebaTa niSnebisagan da frCxilebisagan. gamosaxulebis gamoTvlis Semdeg miiReba erTi mniSvneloba, romelic SeiZ- leba iyos ricxvi, striqoni, an logikuri. gamosaxulebaSi arsebul yvela cvladi unda iyos gan- sazRvruli. Tu gamosaxulebaSi arsebul romelime cvlads ar aqvs mniSvneloba an ar aris gansazRvruli maSin xdeba Secdomis dafiqsireba. JavaScript-Si arsebobs null literali romelic aRniSnavs ganusazRvrel mniSvnelobas. nebismieri gamosaxuleba Sedgeba operandebis da opera- ciis niSnebisagan. magaliTad, gamosaxuleba a*b -Si, a da b operandebia, * operaciis niSania. operaciebi arseboben unaruli (erTadgiliani) da bina- ruli (oradgiliani). gamosaxuleba Caiwereba +A, Tu + - unaru-

- 53 -

li

operaciis aRniSvnaa, an A+B. Tu + - binaruli operaciis

aRniSvnaa. gamoTvlili mniSvnelobis mixedviT, gamosaxuleba SeiZ- leba arsebobdes ariTmetikuli, logikuri da striqonuli. ariTmetikuli gamosaxulebis Casawerad gamoiyeneba Sem- degi operatorebi:

+ Sekreba - gamokleba

*

gamravleba

/

gayofa

%

naSTis miReba gayofis Sedegad

++ operandis mniSvnelobis gazrda 1-iT

-- operandis mniSvnelobis Semcireba1-iT

operaciebis Sesruleba xdeba marcxnidan marjvniv ariT- metikuli operaciebis prioritetis mixedviT. JavaScrip-Si gamoiyeneba operatorebis Caweris Semoklebu- li forma:

X+=Y

X=X+Y

X-=Y

X=X-Y

X*=Y

X=X*Y

X/=Y

X=X/Y

X%=Y

X=X%Y

JavaScript-Si gamoiyeneba Sedarebis Semdegi operaciebi. isi-

ni Sesrulebis Sedegad iReben mxolod or mniSvnelobas true

Tu Sedareba WeSmaritia an false winaaRmdeg SemTxvevaSi. es

operaciebia:

<

naklebia

<=

naklebia an tolia

==

!=

tolia ar aris toli

>

metia

>=

metia an tolia

!

operacia (logikuri ara) gamoiyeneba logikuri tipis

operandebze. Tu a operandis mniSvneloba true, maSin !a – mniS-

vneloba aris mcdari, Tu a operandis mniSvneloba aris false , maSin !a - mniSvneloba aris WeSmariti. garda aRniSnulisa logikuri operaciebis Sesasruleblad gamoiyeneba Semdegi logikuri operaciebi:

&& (logikuri da), || (logikuri an) maTi Sesrulebis Sedegi moyvanilia cxrilSi

- 54 -

A

B

A&&B

A||B

true

true

true

true

true

false

false

true

false

true

false

true

false

false

false

false

striqonul mniSvnelobebze dasaSvebia konkatenciis (Seer- Tebis) operacia. is aRiniSneba + niSniT. magaliTad, st1= “mimdinare”

st2=”mdgomareoba”

st3=st1+st2

an

st1+=st2

maSin st3 miiRebs mniSvnelobas “mimdinare mdgomareoba” st1-ic miiRebs mniSvnelobas “mimdinare mdgomareoba”

JavaScript-Si

gamoiyeneba

Semdegi

operatorebi

(isini

mocemulia prioritetis Semcirebis mixedviT):

inkrementi

++

dekrementi

--

uaryofa

!

unaruli minusi

-

gamravleba

*

gayofa, gayofa naSTis SenaxviT

/,%

gamokleba

-

Sedareba

<,>,<=,>=

toloba

==

ar aris toli

!=

logikuri da

&&

logikuri an miniWeba %=, !=

|| +, +=, -=, *=, /=,

monacemTamonacemTamonacemTamonacemTa tipebistipebistipebistipebis gardaqmnagardaqmnagardaqmnagardaqmna

monacemTa tipebi gavlenas axdens operatorebis Ses- rulebaze, gansakuTrebiT maSin Tu operandebs aqvT sxvadasxva tipi. aviRoT magaliTad ori ricxvis Sekrebis magaliTi 3+3 Sedegi iqneba 6, magram roca operandebs sxvadasxva tipi aqvT 3+”3” Sedegi iqneba”33”

- 55 -

radgan meore operandis tipi aris striqonuli e.i Sedegi iqne- ba striqonuli tipis. pirveli operandi avtomaturad gardaiqm- neba striqonul tipad da Sedegad miiReba ori striqonis gaerTianeba. Tu adgili eqneba aseT SemTxvevas:

3+3+”3” maSin Sedegi iqneba “63”.

JavaSkript enas aqvs SesaZlebloba striqonuli simboloebi gardaqmnas ricxviT monacemebad. amisaTvis iyenebs funqciebs:

parselnt () da ParseFloat(). magaliTad:

parseInt (“34”) Sedegi

parseInt (“23.56”) Sedegi iqneba 23 e. i meore SemTxvevaSi Sedegis damrgvaleba moxdeba mTelamde.

iqneba 34

ParseFloat(“42”)

Sedegi iqneba 42

ParseFloat(“42.56”) Sedegi iqneba 42.33 rom gamoviyenoT es funqciebi iq sadac saWiroa gardaqmna unda CavsvaT Sesabamisi funqcia. magaliTad:

3+3+ parseInt”3” Sedegi iqneba 9. ricxviTi mniSvnelobis gardavqmna striqonulad ganvixiloT martiv magaliTebze:

(“”+2500) Sedegi iqneba2500

(“”+2500). length

Sedegi iqneba 4.

length niSnavs rom daTvlili iqneba simboloebis raodenoba. magaliTad, “2500” simboloebis raodenoba masSi

tolia

striqoni.

tipi aris ricxvi da

4-is.

length

-

sigrZe

misi

,

HTML dokumentSidokumentSidokumentSidokumentSi programisprogramisprogramisprogramis CasmaCasmaCasmaCasma

JavaScript-ze dawerili programa SeiZleba moTavsdes HTML dokumentSi <script> da </script> tegebs Soris, Tu romelime tegi gamorCenili iqneba programa ar gaiSveba. <script> tegSi SeiZleba gamoviyenoT sxvadasxva paramet- rebi, erT-erTi parametria language, romelic gansazRvravs programis enas. JavaScript enisaTvis misi mniSvnelobaa “JavaScript”. am atributis gamoyenebas aqvs saxe:

<script language=”JavaScript”>

- 56 -

<script> deskriptori SeiZleba moTavsebuli iyos yvelgan, sadac saWiroa. zogjer sasurvelia da azri aqvs mis moTavsebas Semdeg deskriptorebs Soris:

<HEAD> da </HEAD> an <BODY> da </BODY>. zogierTi brauzeri ver igebeb HTML –is zogierT tegebs, maSin xdeba maT mier aseTi tegebis ignorireba.

JavaScript-ze programebis dawerisas moxerxebulia gamoye-

-->.

nebuli iqnas komentarebis operatori. mas aqvs saxe <!-- damxuravi tegis win ismeba // simbolo. e.i <script language=”JavaScript”>

<!--

JavaScript-enis operatorebi //--> </script> SevadginoT marTkuTxa samkuTxedis farTobis gamosaTvle- li programa, roca mocemulia misi kaTetebi <HTML> <HEAD> <TITLE> pirveli programa</TITLE>

</HEAD>

<BODY>

<P> programa

</P>

<script>

<!--

var a=8; b= 9 document.write(“marTkuTxa samkuTxedis farTobi

tolia”,a*b/2,”.”)

//--> </script> </P> programis dasasruli</P> </BODY> </HTML> PprogramaSi gamoyenebulia ori cvladi a da b. HTML gverdze gamotanis formirebisaTvis gamoiyeneba write document obieqtSi Tu JavaScript- s mxars ar uWers brauzeri, maSin gamoiyeneba tegi <noscript>, es tegi moyveba <script> da </script> tegebs. Tu brauzeri mxars uWers JavaScrip-s maSin es tegi ignorirdeba.

- 57 -

funqciafunqciafunqciafunqcia

programis Sedgenis dros gamoiyeneba logikurad damo- ukidebeli nawilebi (qveprogramebi). programis yoveli nawili SeiZleba davyoT calkeul qveprogramad. erTxel Seqmnili programa SeiZleba gamoviyenoT mravaljer, bevr enaSi qveprog- ramis gageba realizdeba procedurebis, funqciis, modulebis da a.S daxmarebiT. JavaScript-Si mTavari elementi aris funqcia. funqciafunqciafunqciafunqcia esaaesaaesaaesaa isisisis samSeneblosamSeneblosamSeneblosamSeneblo bloki,bloki,bloki,bloki, romelicromelicromelicromelic ggamoiyeneggamoiyenebaamoiyenebaamoiyenebaba mravaljermravaljer.mravaljermravaljer funqciis aRweras aqvs saxe:

function F (V) {S} sadac, F funqciis saxelia, romlis saSualebiTac xdeba masze mimarTva, V- funqciis paramertebis (argumentebis) siaa, isini erTmaneTisgan gamoiyofian mZimiT; s- funqciis tania, misi saSualebiT moicema is Sesasrulebeli moqmedeba, romliTac unda miviRoT Sedegi. funqciis aRwerisas unda gaviTvaliswinoT, rom is ar unda Seicavdes sxva funqciis aRweras. Tu funqciis aRweras aqvs saxe:

function F (v1,v2,

maSin funqciis gamoZaxebas unda qondes saxe:

F

vn) {s}

(e1,e2,

,en)

en– gamosaxulebebia romlebic faqtiur

parametrebs (argumentebs) gansazRvraven.

, vn parametrebs, romlebic funqciis aRweraSi

aris miTiTebuli qvia formaluri parametrebi. Tu funqcias ar aqvs parametrebi maSin mis aRweras aqvs saxe:

function F () {s} frCxilebis arseboba gamoZaxebis operatorSi aucilebe- lia anu funqciis gamoZaxebas aseT SemTxvevaSi eqneba saxe:

sadac, e1,e2,

v1,v2,

F ().

SeniSvna: yvela gansazRvra da funqcia unda Setanili

iyos <HEAD> ganyofilebaSi. ganvixiloT marTkuTxa samkuTxedis farTobis gamoTvlis programa funqciis gamoyeenebiT, rodesac mocemulia misi kaTetebi.

<HTML>

<HEAD> <TITLE> programa funqciis gamoyenebiT </TITLE>

<script language=”JavaScript”>

- 58 -

<!-- // function ss (a,b) {return a*b/2 } // --> </script> </HEAD> <BODY> <P> furclis gamosaxva funqciiT</P> <script> <!- - var a1=6; b1=9 var s= ss(a1,b1) dokument.write (“miiReba mniSvneloba ”, s,”.”); //--> </script> <P> furclis formirebis dasasruli </P> </BODY> </HTML> funqciis tani Sedgeba mxolod erTi return operatoriT, romelic gansazRvravs funqciis gamoZaxeba xdeba funqciis tanSi miniWebis operatoriT :

s=ss(a1,b1)

formalur a da b parametrs mieniWeba a1-is da b1-is faq- tiuri mniSvneloba da Sesruldeba funqciis tani. miRebuli mniSvneloba Tavsdeba dokumentSi Writen operatoriT. ganxilul SemTxvevebSi momxmarebels ar qonda SesaZ- lebloba Seetana mniSvnelobebi da mieRo Sesabamisi Sedegi.

formebiformebiformebiformebi

interaqtiuri dokumentebis umravlesoba (kavSiri Web gverdsa da momxmarebels Soris) SeiZleba Seqmnili iyos formebis saSualebiT. es is sadgilia sadac damalulia nebis- mieri brauzeris interaqtiuri SesaZleblobebi: teqsturi veli, Rilakebi, gadamrTvelebi, siebi da a.S momxmareblis moqmedeba (mag. mausis Rilakze daWera) iwvevs garkveul process. am procesis damuSaveba xdeba for- mebis elementebiT. procesis damuSavebeli parametris saxeli

- 59 -

iwyeba on TavsarTiT. magaliTad Click procesis damuSavebis parametrs eqneba saxe onClick. procesis parametrebi SeiZleba iyos operatorebi, pro- cesis mniSvnelobebi ki funqciis gamoZaxebebi, romlebic unda Sesruldes rodesac es procesi gaaqtiurdeba. davuSvaT gvsurs SevqmnaT forma romelSic fuZe da simaRlis velebi gamoiyeneba Sesabamisi mniSvnelobis Sesata- nad. garda amisa formaSi SevqmnaT Rilaki gamoTvla. am Ri- lakze daWeriT miviRebT samkuTxedis farTobs. aseT SemTxveva- Si SeiZleba gamoyenebuli iyos Semdegi forma:

<FORM name=”form1”> fuZe: <input type=”text” size=8 name=”st1”><hr> simaRle: <input type=”text” size=8 name=”st2”><hr> <input tupe=“button” value=gamoTvla

onClick=”maxval(document.form1.st1.value,

document.form1.st2.value,)”>

</FORM> davweroT programa, romelic gamoTvlis samkuTxedis farTobs da sawyisi mniSvnelobebis Sesatanad gamoviyenoT forma. <HTML> <HEAD> <TITLE> samkuTxedis farTobis gamoTvla formiT

</TITLE>

<script language=”JavaScript”> <!-- // function Fart(a,b) { var s=(a*b)/2; document.write(“samkuTxedis farTobi aris”, s); return s

}

// --> </script> </HEAD> <BODY> <p> samkuTxedis farTobis gamoTvla </P> <FORM name=”form1”> fuZe: <input type=”text” size=5 name=”st1”><hr> simaRle: <input type=”text” size=5 name=”st2”><hr> <input tupe=“button” value=gamoTvla

- 60 -

onClick=”Fart (document.form1.st1.value,

document.form1.st2.value,)”>

</FORM> </BODY> </HTML> ganvixiloT Fart funqciis parametrebi dawvrilebiT. HTML gverdis brauzeris mier interpretaciisas iqmneba

JavaScript-is obieqtebi. obieqtebs Soris urTierTkavSirs aqvs ierarqiuli struqtura. ierarqiis yvelaze maRal doneze imyofeba Windows obieqti, romelic brauzeris fanjaras warmoadgens. is aris “mSobeli” yvela danarCeni obieqtis. yvela furcels windows obieqtis garda aqvs document obieqti. document obieqtis Tvisebebi gansazRvraven TviT dokumentis Semcvelobas: fonis fers, Sriftis fers da a.S ganxilul magaliTSi miRebuli forma warmoadgens document obieqtis nakadebs, xolo formis yvela elementi warmoadgenen forma obieqtis nakadebs. obieqtze miTiTeba xorcieldeba saxeliT, romelic mocemulia Html tegis name parametriT. samkuTxedis farTobis mniSvnelobis misaRebad unda Sesruldes is konstruqcia romelic formis pirvel velSia Setanili:

document.form1.st1.value

miTiTebuli

document obieqti. ganxilul magaliTSi formis pirveli striqoni SeiZleba asec iyos Cawerili:

formaze

mimarTvisas

SeiZleba ar

iyos

form1.st1.value

rodesac funqciaSi gadaicema martivi tipis monacemebi, magaliTad ricxvebi, rogorc ganxilul magaliTSi, parametrris mniSvnelobis gadacema xorcieldeba mniSvnelobiT. a formalur parametrs eniWeba faqtiuri parametris form1.st1.value mniSvneloba, xolo b formalur parametrs form1.st2.value mniSvneloba. amis Semdeg sruldeba funqciis tani. situacia icvleba rodesac faqtiuri parametri aris obieqti. am dros amboben parametris gadacema xorcieldeba miTiTebiT an dasaxelebiT

pirobiTipirobiTipirobiTipirobiTi operatorioperatorioperatorioperatori if

mas aqvs saxe

if (piroba) {operatori an operatorebi}

- 61 -

if sagasaRebo sityvaa da misi miTiTeba aucilebelia. operatori muSaobs Semdegnairad :

Tu mrgval frCxilebSi moTavsebuli piroba (misi mniSvneloba logikuri tipisaa) WeSmaritia maSin Sesruldeba figurul frCxilebSi Cawerili operatori an operatorebi, Semdeg ki marTva gadaecema figuruli frCxilebis Semdeg Cawe- ril operators. Tu piroba mcdaria maSin figurul frCxilebSi Cawerili operatorebi ignorirdeba da marTva gadaecema figuruli frCxilebis Semdeg Caweril operators.

pirobiTipirobiTipirobiTipirobiTi operatorioperatorioperatorioperatori if else

mas aqvs saxe

if (piroba) piroba WeSmaritia

else

piroba mcdaria

{operatori an operatorebi}

{operatori an operatorebi}

Tu

Tu

magaliTi: ganvsazRvroT TebervalSi dReebis ricxvi imis gaTvaliswinebiT weliadi Cveulebrivia Tu nakiani. var febdays var theYear=1993 if (theYear %4==0) { febdays=29} else { febdays==28}

ganvixiloT JavaScript enaze programis Sedgenis ramdenime magaliTi:

Soris

1. gamovTvaloT

sam

a,

b,

da

c

ricxvebs

maqsimaluri mniSvneloba. <HTML> <HEAD> <TITLE> maqsimaluri mniSvnelobis gamoTvla </TITLE> <script language=”JavaScript”> <!-- // function max (obj) {var a=Number (obj.num1.value); var a=Number (obj.num2.value); var a=Number (obj.num3.value); var m=a

- 62 -

if (b>m)

m=b

if (c>m)

m=c

obj.res.value=m

}

// --> </script> </HEAD> <BODY> <H4>maqsimaluri mniSvnelobis gamoTvla </H4> <FORM name=”form1”> ricxvi 1: <input type=”text” size=8 name=”num1”><hr> ricxvi 2: <input type=”text” size=8 name=”num2”><hr> ricxvi 3: <input type=”text” size=8 name=”num3”><hr> maqsimaluri mniSvneloba tolia <input tupe=“button” value=gansazRvra onClick=”maxval(form1)”> <input type =”text” size=8 name=”res”><hr> <input type =”reset”> </FORM> </BODY> <HTML>

2. SevadginoT programa romelic gamoiTvlis maqsimalur da minimalur mniSvnelobebs sami ricxvidan.

<HTML> <HEAD> <TITLE> maqsimaluri da minimaluri mniSvnelobis gamoTvla </TITLE> <script language=”JavaScript”> <!-- // function maxmin (obj) { var a=Number (obj.num1.value); var b=Number (obj.num2.value); var ca=Number (obj.num3.value); var l var t

if (a>b)

else {t=b;l=a} if(b>t) t=b if(c<l) l=c obj.resmax.value=t

{l=b; t=a}

- 63 -

obj.resmin.value=l

}

// --> </script> </HEAD> <BODY> <H4>maqsimaluri da minimaluri mniSvnelobis

gamoTvla

</H4>

<FORM name=”form1”> ricxvi 1: <input type=”text” size=8 name=”num1”><hr> ricxvi 2: <input type=”text” size=8 name=”num2”><hr> ricxvi 3: <input type=”text” size=8 name=”num3”><hr> maqsimaluri mniSvneloba tolia <input tupe=“button” value=gansazRvra onClick=”maxminval(form1)”> <hr> <input type =”text” size=8 name=”resmax”>maqsimaluri mniSvneloba<hr> <input type =”text” size=8 name=”resmin”>minimaluri mniSvneloba<hr> <input type =”reset”> </FORM> </BODY> <HTML> 3. SevadginoT programa romelic mocemul oTx a,b,c, d ricxvebs Ddaaalagebs zrdadobis mixedviT algoriTmialgoriTmi:algoriTmialgoriTmi Tavidan edareba ori a da b cvladebis mniSvnelobebi. Tu a meti aRmoCndeba b-ze cvladebi cvli- an mniSvnelobebs, Semdeg a-s mniSvneloba dardeba c-s. Tu a>c-ze maSin cvladebi kvlav icvlian mniSvnelobebs. da bolos aedareba d-s, saWiroebis SemTxvevaSi kvlav xdeba cvladebis mniSvnelobebis Secvla. aseTnairad miiReba rom a-s mniSvneloba 4-dan aris minimaluri. Semdeb b eda- reba c da d-s saWiroebisas cvladebi cvlian mniSvnelo- bebs. bolos c edareba d-s.

<HTML> <HEAD> <TITLE>oTxi ricxvis mniSvnelobis dalageba</TITLE> <script language=”JavaScript”> <!-- //

- 64 -

function maxmin (obj) { var a=Number (obj.num1.value); var b=Number (obj.num2.value); var c=Number (obj.num3.value); var d=Number (obj.num3.value); if (a>b) {r=a; a=b; b=r} if (a>c) {r=a; a=c;c=r} if(a.d){r=a;a=d;d=r} if (b>c) {r=b;b=c;c=r} if (b>d){r=b;b=d; d=r} if (c>d){r=c; c=d; d=r}

obj.num1.value=a

obj.num2.value=b

obj.num3.value=c

obj.num4.value=d

}

// --> </script> </HEAD> <BODY> <H4> oTxi ricxvis mniSvnelobis dalageba zrdadobis mixedviT </H4> <FORM name=”form1”> ricxvi 1: <input type=”text” size=10 name=”num1”><hr> ricxvi 2: <input type=”text” size=10 name=”num2”><hr> ricxvi 3: <input type=”text” size=10 name=”num3”><hr> ricxvi 4: <input type=”text” size=10 name=”num4”><hr> maqsimaluri mniSvneloba tolia <input tupe=“button” value=dalageba onClick=”sortval(form1)”> <hr> <input type =”reset” value= gasufTaveba> </FORM> </BODY> <HTML>

ciklebiciklebiciklebiciklebi

ciklebi aRniSnavs gansazRvruli moqmedebebis ganmeore- biT Sesrulebas, manam sanam ar Sesruldeba garkveuli piroba. JavaScript –Si yvelaze xSirad gamoyenebadi cikluri struqtura aris for. mis sintaqss aqvs Semdegi saxe:

for ([sawyisi mniSvneloba]; [piroba]; [cvlilebis biji]) {ciklis SigniT Sesasrulebeli operatorebi

- 65 -

}

kvadratuli frCxilebi miuTiTebs rom maTSi Cawerili operatorebi ar arian aucilebeli rom iqnan Setanili sawyisi mniSvneloba- gansazRvravs ciklis mTvlelis saw- yis mniSvnelobas; piroba- igulisxmeba iseTive gamosaxuleba rogorc if ope- ratorSi. cvlilebis biji- warmoadgens operators, romelic srul- deba yoveljerze ciklis SigniT Sesasrulebeli operatorebis Sesrulebis Semdeg.

masivebimasivebimasivebimasivebi

JavaScript-Si monacemTa Senaxvis da organizaciis erT-erTi yvelaze moxerxebuli xerxia masivi. yvelaze martivi masivi SeiZleba warmovidinoT erTganzomilebiani cxrilis saxiT. aseTi cxrilis TiToeuli sveti Seicavs monacemebs., amitom TiToeuli sveti danomrilia. svetebis danomrisaTvis ( masivis elementebis) gamoiyeneba mkacrad gansazRvruli ricxviTi Tanmimdevroba, pirvel svets aqvs nulovani nomeri. svetebis am nomrebs zogjer uwodeben indeqsebs. masivis elementze mimar- TvisaTvis saWiroa masivis saxeli da misi indeqsis saxeli. masivis elementebi SeiZleba iyos nebismieri tipis, maT Soris obieqtebic. JavaScript-Si erTi masivis elementebi SeiZ- leba iyos sxvadasxva tipis monacemebi. masivi ganisazRvreba cvladis saSualebiT. amitom masivis Seqmnisas cvlads eniWeba axali masivis obieqti. masivebi warmoadgenen JavaScript-Si obieqtebs masivis gamosacxadeblad gamoiyeneba specialuri sityva new. misi saSualebiT mexsierebaSi masivis elementebisaTvis gamoiyofa adgili. mas aqvs araaucilebeli parametri Array (), romelSic SeiZleba miTiTebuli iyos masivis elementebis saorientacio raodenoba. magaliTad var USS = new Array (51) am aRweris Sedegad masivisaTvis mexsierebaSi gamoiyofa adgili 51 elementisTvis. rom Seivsos masivi mis yovel elements unda mivaniWoT mniSvneloba. masivis elementze mimarTvisaTvis gamoiyeneba specialuri indeqsebi, Tavidan iwereba masivis saxeli, Semdeg kvadratul frCxilebSi saWiro elementis indeqsi. USS masivis pirveli elementi iqneba:

USS[0].

- 66 -

rom

mivaniWoT

masivis

elementebs

konkretuli

mniSvnelobebi

unda

gamoviyenoT

miniWebis

operatori.

magaliTad:

USS[0]=”Arizona”

 

USS[1]=”Arkansas”

da a.S

ssss aaaa vvvv aaaa rrrr jjjj iiii SSSS oooo eeee bbbb i:i:i:i:

1. qvemoT CamoTvlili cvladebiis aRweridan da iniciali- zaciidan romelia Secdoma, axseniT ratomaa Secdoma da gaasworeT is:

a. my_name =”kate”

b. var how many=25

c. var zip=document.form1.zip.value

d. var 1address=document.nameform.address1.value

2. ra mniSvnelobebs miiRebs cvladi drf operatorebis Sesrulebisas:

var drf=2

drf=drf+2

drf=drf*10

drf=drf+ “20” drf= “robert” 3. sadaa Secdoma:

4. ras niSnavs termini gaerTianeba JavaScript -Si

sarCevisarCevisarCevisarCevi

WEB gverdebisgverdebisgverdebisgverdebis proeqtirebaproeqtirebaproeqtirebaproeqtireba

Sesavali

-

3

-

ra aris saWiro WEB gverdis Sesaqmnelad

-

3 -

ZiriTadi mcnebebi

-

5 -

sabazo tegebi

-

6 -

abzacis formatireba

-

8 -

teqstis formatireba

-

9 -

- 67 -

horizontaluri xazi

laboratoriuli samuSao

grafikuli obieqtis Casma WEB gverdze suraTisa da teqstis urTierTmedebareoba

laboratoriuli samuSao

CamonaTvali da numeracia

laboratoriuli samuSao

moZravi striqoni

laboratoriuli samuSao

cxrilebi ujrebis formatireba

laboratoriuli samuSao

hiperkavSirebi

laboratoriuli samuSao

stilebisstilebisstilebisstilebis SeqmnaSeqmnaSeqmnaSeqmna dadadada gamoyenebagamoyenebagamoyenebagamoyeneba CSS

- 11 -

13 -

- - 16 - 21 -

- - 22 -

- 25 -

-

- 28 -

-

- - 35 - - 36 - -

32 -

29 -

- 26

14 -

-

40 -

- 41 -

CSS struqtura

-

44 -

CSS Tvisebebi

-

46 -

laboratoriuli samuSao

- 50 -

daprogramebisdaprogramebisdaprogramebisdaprogramebis enaenaenaena JavaScript

-

51 -

literalebi

-

51

-

cvladi

-

52 -

55 -

gamosaxuleba monacemTa tipebis gardaqmna

- 53 - -

HTML dokumentSi programis funqcia formebi

Casma

- 56 - -

58 - - 59 -

pirobiTi

operatori if

- 61 -

pirobiTi operatori if

else

-

62 -

ciklebi

-

65 -

masivebi

-

66 -

savarjiSoebi

-

67 -

- 68 -

gamoyenebuli literatura

- 69 -

gamoyenebuligamoyenebuligamoyenebuligamoyenebuli literaturaliteraturaliteraturaliteratura

1. J. Neiderst "Learning Web Design" March 2001.

2. N. Heinle, M. Webb " Designing with JavaScript" June 2001.

3. М. Дмитриева JavaScript М.: 2002

4. Дэнни Гудман JavaScript

5. Вайк А.Р, Джиллиам Джейсон Д. JavaScript М.: 2004

М.: 2002

© gamomcemloba ,,teqnikuri universiteti’’, 2006

- 69 -

koreqtori kompiuteruli uzrunvelyofa

ibeWdeibeWdebaibeWdeibeWdebababa avtorisavtorisavtorisavtoris miermiermiermier warmodgeniliwarmodgeniliwarmodgeniliwarmodgenili saxiTsaxiTsaxiTsaxiT

gadaeca warmoebas 02.12.2004 w. xelmowerilia dasabeWdad 25.04.2005 w. qaRaldis zoma 60X84 1/8. pirobiTi nabeWdi Tabaxi 4. saaRricxvo-sagamomcemlo Tabaxi 3,25. tiraJi 100 egz. SekveTa #

gamomcemloba `teqnikuri universiteti~, Tbilisi, kostavas 77

Tabaxi 3,25. tiraJi 100 egz. SekveTa # gamomcemloba `teqnikuri universiteti~, Tbilisi, kostavas 77 - 70 -

- 70 -