HTML & Javascript

saqarTvelos teqnikuri universiteti
m. k ik n aZ e, e. Ci k aS u a, T . kaiS au ri ,
T . Jvani a, l . p etri aS vi li
v e b d i z a i n i
HTML & JAVA SCRIPT
damxmare saxelmZRvanelo
damtkicebulia stu-s
saredaqcio-sagamomcemlo
sabWos mier
Tbilisi
2006
wigni warmoadgens damxmare saxelmZRvanelos saganSi `veb

gverdebis proeqtireba~. masSi aRwerilia HTML (Hyper Text
1
Markup Language) hiperteqstebis markirebis enis SesaZleblobebi,
stilebis Seqmna da gamoyeneba CSS (Cascading Style Sheet) enis
saSualebiT da Java script daprogramebis enis safuZvlebi.
saxelmZRvanelo gaTvaliswinebulia saqarTvelos teqnikuri
universitetis informatikisa da marTvis sistemebis fakultetis
studentebisaTvis da aseve mkiTxvelTa farTo wrisaTvis romlebic
dainteresebulni arian veb dizainiT.
recenzentebi: prof. z. gasitaSvili

doc. b. kiziria
© gamomcemloba @@`teqnikuri universiteti~ 2006
WEB gverdebis proeqtireba
Sesavali
rogorc cnobilia internetSi arsebuli nebismieri informacia,
romlTa daTvaliereba SesaZlebelia internet-brauzerebis saSualebiT,
2
inaxeba romelime 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 saSualebiT xdeba mxolod Web gverdebis
Seqmna da redaqtireba.
ra aris saWiro WEB gverdis Sesaqmnelad

Web gverdis aRwera xdeba nebismier teqstur redaqtorSi.
amisaTvis vxsniT mag: teqstur redaqtors NotePad
(Start+Programs+Accessories+NotePad) da vkrifavT html
dokuments (konkretulad ras, aRwerilia Semdeg TavebSi);
Cven mier Seqmnili dokumenti damaxsovrebis dros teqsturi

failis saxiT rom ar Caiweros diskze, amisaTvis vaniWebT fails html
an htm gafarToebas. e.i. damaxsovrebis dros File name-Si vkrifavT
failis_saxels.html mag: index.html;
Cven mier Seqmnili Web gverdis daTvaliereba xdeba internet-

brauzeris saSualebiT. e.i SevdivarT Microsoft Explorer an Netscape
3
Navigator-Si da viZaxebT fails File+Open+Browse da virCevT
Sesabamis fails.
SeniSvna: Tu dagvWirda Web gverdis redaqtireba vbrundebiT

teqstur redaqtorSi (NotePad) sadac avkrifeT programa,
varedaqtirebT Sesabamis dokuments da vimaxsovrebT.
(internet-brauzeridan html dokumentis gaxsna xdeba
konteqsturi meniudan View Source brZanebiT.)
internet-brauzerSi dokumentis ganaxleba xdeba instrumentebis
velidan Refresh brZanebiT.
ZiriTadi mcnebebi
nebismieri html dokumenti Sedgeba internet-brauzerSi
gamosatani teqstisagan da mmarTveli simboloebisagan anu
tegebisagan.
tegi 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_saxeli> - gamxsneli da
</tegis_saxeli> - damxuravi tegi, romelTa saSualebiTac xdeba ama
Tu im brZanebis moqmedebis aris gansazRvra. (arsebobs
gamonaklisi tegebi romlebisTvisac ar gamoiyeneba damxuravi tegi)
4
TiTqmis yvela tegi Sedgeba ori nawilisagan:
tegis saxeli - romelic gansazRvrava Tu romel obieqtze xdeba

moqmedeba;
atributi – miuTiTebs ra moqmedeba unda Sesruldes aRniSnul
obieqtze.
tegis saboloo formati:

<tegis_saxeli atributi1=”mniSvneloba”
atributi2=”mniSvneloba”>
...
moqedebis veli
....
</tegis_saxeli>
mag.: <font face=acadnusx size=4 color=red>

</font>
sabazo tegebi
<HTML> ... </HTML> - aris Web dokumentis pirveli da bolo tegi,
romelic miuTiTebs rom aRniSnuli faili aris web gverdi
da ara ubarlo teqsti.
<HEAD> ... </HEAD> - saTauris bloki, sadac iwereba zogadi
informacia veb gverdis Sesaxeb.
<TITLE> ... </TITLE> - tegebs Soris iwereba dokumentis saxeli,
romelic Semdgom gamoisaxeba brauzeris saTauris velSi.
<BODY> ... </BODY> - tegi xsnis dokumentis tans, sadac
aRiwereba mTlianad dokumenti (web gverdis
Semcveloba).
html dokumentis zogadi struqtura:

<HTML>
<HEAD>
5
<TITLE> dokumentis saxeli </TITLE>
</HEAD>
<BODY>
... dokumentis Semcveloba ...
</BODY>
</HTML>
mag:
<html>
<head>
<title>
My first page
</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>
6
</html>
abzacis formatireba
<P> - tegi xsnis axal abzacs, sadac SeiZleba movaTavsoT
rogorc teqsti, aseve grafikuli gamosaxuleba.
ALIGN atributis saSualebiT xdeba mdebareobis gansazRvra.
am atributs SeiZleba mieniWos Semdegi 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
davwerT <P>.
<BR> - tegis saSualebiT xdeba axal striqonze gadasvla. am

dros ucvleli rCeba wina abzacSi miTiTebuli mdebareoba.
<BR> tegis daxurva ar aris saWiro e.i. </BR> - arasworia.
7
<BLOCKQUOTE> - tegis saSualebiT xdeba teqstis tabulacia.
mag:
<html>
<title> My second page </title>
<body>
<p align=center>
AUTOBIOGRAPHY
</p>
<p align=left>
First name: Eka
<br>
Last name: Chikashua
</p>
<blockquote>
15.10.2001
</ blockquote >
</body>
</html>
teqstis formatireba
8
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.
aseve SesaZlebelia erTdroulad miuTiToT ramodenime 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: absolituri <font size=4>
da SedarebiTi <font size=+1>.
absolituri
mniSvneloba 1 2 3 4 5 6 7
SedarebiTi
mniSvneloba -2 -1 - +1 +2 +3 +4
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>
9
</p>
</body>
</html>
SesaZlebelia HTML dokumentis sabazo parametrebis Secvla

<BaseFont> tegis saSualebiT, romelic 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.
Sriftis stilebi
tegi dasaxeleba funqcia

<I> ... </I>
Italic daxrili
<EM> ... </EM>
<B> ... </B>
Bold muqi
<STRONG> ... </STRONG>
<U> ... </U> Underline xazgasmuli
<SUB>... </SUB> subscript zedaindeqsi
<SUP> ... </SUP> superscript qvedaindeqsi
10
horizontaluri xazi
saWiroebis SemTxvevaSi web gverdis horizontaluri 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 piqselebSi (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>
xazis mdebareobis arCeva SesaZlebelia ALIGN=Left /

Center / Right atributis saSualebiT. (avtomaturad xazis Casma
xdeba ekranis centrSi).
xazis stilis Secvla xdeba NOSHADE atributiT, romelic xsnis
xazis efeqts.
<hr size=7>
<hr size=7 NOSHADE>
11
SeniSvna: <HR> tegs ar gaaCnis damxuravi tegi.
e.i. </HR> - arasworia.
laboratoriuli samuSao
12
grafikuli obieqtis Casma WEB gverdze
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=sruli gza failamde>
im SemTxvevaSi Tu HTML dokumenti da grafikuli faili
moTavsebulia erT saqaRaldeSi failis sruli gzis nacvlad mieTiTeba
mxolod failis saxeli.
<IMG SRC=failis saxeli> e.i. <IMG SRC=*.GIF > an
<IMG SRC=*.JPG>
ganvixiloT SemTxvevei roca HTML dokumenti da grafikuli
faili ar aris moTavsebuli erT saqaRaldeSi.
picture3.g <img src=Image/New/picture3.gif>
if
picture2.g <img src=Image/picture2.gif>
if
Index.htm
l
picture1.g <img src=picture1.gif>
if
picture4.g <img src=../picture4.gif>
if
13
picture5.g <img src=../Old/picture5.gif>

1) Tu suraTi da HTML dokumenti moTavsebulia erT saqaRaldeSi,
maSin vuTiTebT mxolod suraTis saxels:
<img src=failis saxeli>
mag. <img src=picture1.gif>
2) Tu suraTi moTavsebulia HTML dokumentis saqaRaldis
qvesaqaRaldeSi, maSin mieTiTeba qvesaqaRaldis saxeli da
Semdeg suraTis saxeli.
<img src=qvesaqaRalde/failis saxeli>
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 saxeli>
mag. <img src=Image/picture4.gif>
4) Tu suraTi moTavsebulia HTML dokumentis saqaRaldis gareT,
sxva saqaRaldeSi, maSin xdeba saqaRaldidan gasvla (../), mere
mieTiTeba im saqaRaldis saxeli romelSic suraTia moTavsebuli da
bolos suraTis saxeli.
<img src=../saqaRalde/failis saxeli>
mag. <img src=../Old/picture5.gif>
14
SesaZlebelia suraTis zomebis miTiTeba da suraTis Casma
CarCoSi Semdegi atributebis saSualebiT:
Width
Width=ricxvi an % - sigrZe;
Height=ricxvi an % - sigane.
Border=ricxvi – CarCos sisqe Height
suraTisa da teqstis Border

urTierTmedebareoba
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
Tu gvinda mdebareobis Secvla suraTis aRmwer tegSi unda

miuTiToT atributi align romelsac SeiZleba mivaniWoT mniSvne-
lobebi middle - centri da top- zemoT.
mag.
...
<img src=emblem.gif align=middle>
...
15
<img src=emblem.gif align=top>
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 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>
16
im SemTxvevaSi Tu gvinda suraTis gaswvriv davweroT
ramodenime striqoni, maSin suraTis aRmwer tegSi unda miuTiToT
atributi Align, romelsac SeiZleba miuTiToT Semdegi mniSvnelobebi
left-marcxniv an right-marjvniv.
mag.:
<html>
<title>gtu</title>
<body>
<img src=gtu.jpg align=left>
<p> <font face=acadnusx>
1922 wels 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>
Tu zemoT ganxilul programaSi SevcvliT suraTis

mdebareobas <img src=gtu.jpg align=right> maSin Sesabamis
web gverds eqneba Semdegi saxe.
17
roca suraTis gverdiT aris ramodenime striqoni, 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>
Tu ramodenime striqonis Semdeg gvinda suraTis gaswvriv

darCes carieli adgili da axali striqoni gagrZeldes suraTis qvemoT
unda gamoviyenoT tegi <br clear=all>.
mag.:
<html>
<title>gtu</title>
<body>
<p align=center> <font face=acadnusx size=4>
saqarTvelos teqnikuri <br> universiteti
<hr> <br clear=all>
acxadebs abiturientebis miRebas 2000-2001 saswavlo wlisaTvis
</font>
18
</p>
</body>
</html>
suraTidan teqstamde horizontaluri da vertikaluri daSorebis
gansazRvra xdeba Sesabamisad HSPACE da VSPACE atributebiT
mag.: <img src=gtu.jpg align=left HSPACE=25 VSPACE=10>
HSPACE=25
VSPACE=10
aseve SesaZlebelia suraTis Casma web gverdis fonad.

amisaTvis BODY tegSi gamoiyeneba atributi background
<body background=failis saxeli>
fonad SeiZleba CavsvaT grafikuli gamosaxuleba jpg an gif
gafarToebiT.
mag.:
<html>
<title>gtu</title>
<body background=pic.gif>
<p>
...
19
20
CamonaTvali da numeracia
CamonaTvalis aRwera xdeba <UL> ... </UL> (unordered list)
tegis saSualebiT.
CamonaTvalis TiTeuli wevri aRiwereba <LI> (List Item) tegis
saSualebiT.
CamonaTavlis saTauris miTiTeba xdeba <LH> (List Head)
tegiT.
zogadad CamonaTvals aqvs Semdegi saxe:

<UL>
<LH>siis saTauri
<LI>I elementi
<LI>II elementi
<LI>III elementi
</UL>
mag:
<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>
21
SesaZlebelia CamonaTvalis stilis arCeva TYPE atributis
saSualebiT
<UL TYPE=disc> <UL TYPE=circle> <UL TYPE=square>
im SemTxvevaSi Tu gvWirdeba CamonaTavlis gadanomvra,

mis aRwera unda movaxdinoT unda <OL> ... </OL> (ordered list)
tegis saSualebiT.
mag:
<HTML>
<TITLE> Unordered Lists </TITLE>
<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>
22
SesaZlebelis numeraciis stilis arCeva TYPE atributis
saSualebiT
<OL TYPE=I> <OL TYPE=A> <OL TYPE=a>
aseve SesaZlebelia numeraciis sawyisi cifris arCeva START

atributis saSualebiT
<OL START=5> <OL TYPE=A START=3> <OL TYPE=I START=7>
23
24
moZravi striqoni
moZravi striqonis aRwera xdeba <MARQUEE> tegiT,
romelsac gaaCnia Semdegi atributebi:
WIDTH: samoZrao aris sigrZe

HEIGHT: samoZrao aris simaRle
BGCOLOR: fonis feri
HSPACE: horizontaluri da vertikaluri daSoreba
VSPACE: samoZrao aris irgvliv
mag.:
<marquee width=400 height=50 bgcolor=gray>
<font face=acadmtavr size=4 color=white>
<b>saqarTvelos teqnikuri universiteti</b>
</font>
</marquee>
moZrav striqonSi teqstis moZraobis mimarTulebis, stilis,

raodenobis, siCqaris da gadaadgilebis bijis gansazRvra xdeba
Semdegi atributebiT:
DIRECTION moZraobis mimarTuleba

LEFT - marcxniv
RIGHT - marjvniv
UP - zeviT
DOWN - qveviT
BEHAVIOR moZraobis stili
SCROLL - moZraoba meordeba ganuwyvetliv
Sesabamisi erTi mimarTulebiT
SLIDE – moZraoba sruldeba mxolod

erTjer Sesabamisi mimarTulebiT
25
ALTERNATE - moZraoba meordeba
ganuwyvetliv urTierTsapirispiro
mimarTulebiT
LOOP gansazRvravs moZraobis ganmeorebis

raodenobas
SCROLLDELAY gansazRvravs moZraobis siCqares
SCROLLAMOUNT gansazRvravs gadaadgilebis 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
150
26
cxrilebi
27
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 xdeba cxrilis ageba.
rogorc viciT cxrili Sedgeba striqonebisagan da am striqonSi arsebuli
ujrebisagan. aqedan gamomdinare sxvadasxva tegis saSualebiT
xdeba calkeuli elementebis aRwera:
<TABLE> - cxrili, <TR> - striqoni, <TD> - ujra.
<TABLE>
<TR> <TD> . . . </TD> <TD> . . . </TD> <TD> . . . </TD> </TR>
<TR> <TD> . . . </TD> <TD> . . . </TD> <TD> . . . </TD> </TR>

</TABLE>
mag.: <table width=80>

<tr>
<td>Cell1</td> <td>Cell2</td>
</tr>
<tr>
<td>Cell3</td> <td>Cell4</td>
</tr>
</table>
cxrilis formatirebisaTvis gamoiyeneba Semdegi atributebi:

1. Border=ricxvi - CarCos (xazebis) sisqe
<table border=2> <table border=7>
28
2. Width=ricxvi an % - cxrilis sigrZe
<table border=2 width=200>
<table border=2 width=80%>
3. Height=ricxvi an % - cxrilis simaRle

<table border=2 width=200 height=100>
4. Bgcolor=feris nomeri an saxeli - fonis feri

<table border=2 width=200 height=100 BGCOLOR=GRAY>
5. Background=failis saxeli - grafikuli gamosaxulebis Casma

fonad
<table border=2 width=200 height=100 BACKGROUND=PIC.JPG>
29
6. CellPadding=ricxvi - manZili ujris sazRvrebidan masSi
moTavsebul teqstsa Tu grafikul
gamosaxulebamde
<table border=2 width=200 height=100 CELLPADDING=15>
15pixels
7. CellSpasing=ricxvi - daSoreba ujrebs Soris

<table border=2 width=200 height=100 CELLSPACING=15>
15 pixsels
ujrebis formatireba
im SemTxvevaSi Tu gvinda cxrilis calkeuli 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 </td>
<td WIDTH=150>Cell2</td>
<td WIDTH=100>Cell3</td>
</tr>
<tr> 50 150 100
<td HEIGHT=100>Cell4</td>
<td>Cell5</td> 50
<td BGCOLOR=GRAY>Cell6</td>
</tr>
</table>
30
100
ujraSi teqstisa da grafikuli gamosaxulebis mdebareomis
arCeva
 horizontaluri mdebareobis arCeva xdeba atributiT: Align= Left /

Center / Right
<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 atributiT: Valign= Top /

Middle / Bottom
<table border=2 height=150>

<tr>
<td valign=top>Cell1</td>
<td valign=middle>Cell2</td>
<td valign=bottom>Cell3</td>
</tr>
</table>
31
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>
</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>
4. teqstis Sriftisa da stilis aRwera saWiroa yvela ujraSi

calcalke;
5. im SemTxvevaSi, Tu erT striqonze yvela ujraSi
gvsurs fonis Secvala, maSin Sesabamisi atributi (bgcolor an
background) yvela calkeuli ujris nacvlad SegviZlia
miuTiTos striqonis aRmwer tegSi (tr). aseve SeiZleba
moviqceT mdebareobis arCevisas.
ujrebis gaerTianeba
cxrilis agebis dros vawydebiT ujrebis gaerTianebis
saWiroebas. amisaTvis gamoiyeneba Semdegi atributebi:
 Colspan=ricxvi – svetebis gaerTianeba;
aRniSnuli ricxvi gansazRvravs gasaerTianebeli ujrebis
raodenobas..
32
<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.

<tr>
<td ROWSPAN=5>Cell</td>
<td>Cell1</td>
</tr>
<tr> <td>Cell2</td></tr>
</tr>
</table>
33
hiperkavSirebi
Web saitis Sesaqmnelad saWiroa calkeuli veb gverdis
erTmaneTTan dakavSireba, kavSiri SeiZleba ganxorcieldes teqstis
garkveul nawilze an grafikul gamosaxulebaze.
gamoiyeneba kavSiris gansaxorcielebis 4 tipi:
1. realuri misamarTis (URL) mqone web sait-
Tan dakavSireba
<A HREF=HTTP://misamarTi> xxx </A>
xxx-iT aRniSnul adgilze iwereba teqsti, romlis saSualebiTac
unda ganxorcieldes kavSiri, e.i. Sesabamis teqstze mausis daWeriT
moxdeba miTiTebul 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>
34
SeniSvna: (stu-ze mausis daWeriT unda moxdes stu-s web gverdis
gamoZaxeba, romlis misamarTia www.gtu.edu.ge)
2. momxmareblis mier Seqmnili web gverdebis

erTmaneTTan dakavSireba
<A HREF=failis saxeli.HTML> xxx </A>
mag.: jgufi #108040
1. zaza
2. maka
3. nino
<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 damaxsovrebuli biography.html failSi)
3. kavSiri, romlis saSualebiTac SesaZlebelia we-

rilis gagzavna aRniSnul safosto misamarTze
<A HREF=MAILTO:safosto misamarTi> xxx </A>
mag.: CvenTan dakavSireba SesaZlebelia el-fostis
saSualebiT
<font face=acadnusx size=4>
CvenTan dakavSireba SesaZlebelai
<a href=mailto:[email protected]> el-fostis </a>
saSualebiT </font>
35
SeniSvna: (sityvaze `el-fostis~ mausis daWeriT unda moxdes
werilis gagzavna [email protected] misamarTze).
4. erTi failis farglebSi, markeriT moniSnul

adgilTan dakavSireba;
imisaTvis rom, erTi failis farglebSi, sxvadasxva adgilTan
(striqonTan) moxdes kavSiris ganxorcieleba, winaswar unda iqnas
markeri dayenebuli Sesabamis adgilebze anu saxeli unda daerqvas
aRniSnul adgilebs.
markeris dayeneba xdeba <A NAME=markeris saxeli> tegis
saSualebiT. aRniSnuli tegi iwereba im teqstis win sadac gvinda
markeris dayeneba.
gadasvla Sesabamis markerze xdeba Semdegi tegiT: <A

HREF=#saniSnis saxeli >
mag.: SevqmnaT `sakurso samuSao~-s web gverdi,
romelic Sedgeba 3 Tavisagan. brauzeris fanjaraSi Cans mxolod
Tavi1-is Semcveloba, imisaTvis 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
36
<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>
</p>
<p>
<a name=1> <i>Tavi1 </i></a>
...
...
...
</p>
<p>
...
...
...
</p>
<p>
...
...
37
...
</p>
</body>
</html>
www.gtu.ge
netacad.gtu.ge
[email protected]
resursebi.html
scavleba.html
tanamshromlebi.html
siaxle.html
rekvizitebi.html
38
stilebis Seqmna da gamoyeneba
CSS - Cascading Style Sheet
CSS enis daxmarebiT SesaZlebelia veb gverdis sruli kontroli
gacilebiT martivad da metad funqcionalurad, vidre es HTML enis
saSualebiT xdeba.
arsebobs sami saxis stili:
1) INLINE STYLE SHEETS – Sida stili.
Sida stilis gamoyenebisas specialuri atributebi (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
<font style=letter-spacing: 7> saqarTvelos teqnikuri
universiteti </font>
2) GLOBAL STYLE SHEETS – globaluri stili.
39
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>
<p align=center> <h1> saqarTvelos teqnikuri universiteti </h1>
</p>
<p align=center> <h2> saqarTvelos teqnikuri universiteti </h2>
</p>
</p>
</body>
</html>
3) LINKED STYLE SHEETS - dakavSirebuli stilebi.

dakavSirebuli saxis stilis gamoyeneba mizanSewonilia da
mosaxerxebeli, roca vqmniT ramodenime 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}
40
.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).
SevqmnaT HTML faili (mag. index.html), sadac gamoyenebu-
li 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 struqtura
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>
p {text-align: center}
body {background-color: blue}
h1 {font-family: acadmtavr; font-size: 16}
</style>
<body>
41
<p>
<h1> saqarTvelos teqnikuri universiteti </h1>
</p>
</body>
</html>
2) .class_name {property: value}

klasis saxelad SegviZlia miuTiTod nebismieri sitva da
Semdgom HTML elementSi am klasis gamoZaxeba xdeba
clas=clas_name atributiT.
mag.
<html>
<title>gtu</title>
.back {background-image: url(../image/pic.jpg); 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>
3) #id_name {property: value}

Tu gvWirdeba aRweril klass davamatoT romelime Tviseba,
maSin vqmniT e.w. individualur stils – ID, romlis gamoyeneba
HTML elementSi xdeba ID=id_name atributiT.
mag.
42
<html>
<title>gtu</title>
.back {background-image: url(../image/pic.jpg); background-repeat:
no-repaet; background-position: center center}
.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>
CSS Tvisebebi
Background Properties – fonis Tvisebebi
43
Tviseba mniSvnelobebi aRwera
background- color name fonis feri
color
background- url(*.jp) suraTis Casma
image url(*.gif) fonad
mag. url(pic.jpg)
background- repeat
repeat
repeat-x
repeat-y
no-repeat
background- top left fonad Casmuli

position top center suraTis
top right mdebareobis
center left arCeva
center center
center right
bottom left
bottom center
bottom right mag. center center
Fonts Properties - Sriftis Tvisebebi
Tviseba mniSvnelobebi mag. aRwera

font-family acadusx Sriftia
44
arial arCeva
...
font-size small teqstis
medium zomis
large arCeva
ricxvobrivi
mniSvlelobebi:
mag: 10
12
20
30
...
font-style normal teqstis stili
italic
font-weight normal teqstis sisqe
bold
bolder
lighter
Text Properties - teqstis Tvisebebi
Tviseba mniSvnelobebi mag. aRwera

color red; teqstis feri
#ac34bf55
...
text- none xazgasmis
decoration underline stili
overline
line-through
text-align left teqstis
center mdebereoba
right
justify omxrivi gaswoeba
45
text- ricxobrivi abzacis
indent mniSvneloba dayeneba
mag: 20
letter- ricxobrivi asoebs Soris
spacing mniSvneloba daSoerba
mag: 5
word- ricxobrivi sityvebs
spacing mniSvneloba Soris
mag: 10 daSoreba
text- none
transform capitalize
uppercase
lowercase
Border Properties - CarCos Tvisebebi

border-color feris dasaxeleba xazis feri
border-width thin viwro xazis sisqe
medium saSualo
thick sqeli
ricxviTi mniSvneloba
border-style none xazis stili
double
groove
ridge
inset
outset
border-top-color zeda xazis feri
border-top-width sisqe
border-top-style stili
border-bottom -color qveda xazis feri
border-bottom -width sisqe
border-bottom –style stili
46
border-left-color marcxena xazis feri
border-left -width sisqe
border-left –style stili
border-right-color marjvena xazis feri
border-right -width sisqe
border-right –style stili
Padding Properties –ujris xazidan teqstamde daSoreba
Padding-top ricxviTi mniSvneloba zeda

daSoreba
Padding- ricxviTi mniSvneloba qveda
bottom daSoreba
Padding-left ricxviTi mniSvneloba marcxena
daSoreba
Padding-right ricxviTi mniSvneloba marjvena
daSoreba
Margin Properties - velis Tvisebebi

margin-top ricxviTi mniSvneloba zeda
daSoreba
margin-bottom ricxviTi mniSvneloba qveda
daSoreba
margin-left ricxviTi mniSvneloba marcxena
daSoreba
margin-right ricxviTi mniSvneloba marjvena
daSoreba
[email protected]
www.alta.ge www.pasi.ge
47
[email protected]
www.complex-pro.com
about.html news.html firms.html
fonts.html
daprogramebis ena JavaScript
JavaScript-i daprogramebis ena gamoiyeneba HTML dokumentebis
Sesaqmnelad. enis mTavari aspeqti aris obieqtis cneba.
literalebi
48
martivi monacemebi razedac SeiZleba agebuli iqnas programa aris literalebi.
mTeli tipis mudmivebi SeiZleba mocemuli iqnas aTobiTi TeqvsmetobiTi, an
rvaobiTi formiT.
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 daprogramebis enaSi mZimis
nacvlad gamoiyeneba wertili. magaliTad, 123. 45, -56.789.
aTwiladi ricxvebis Casawerad gamoiyeneba eqsponencialuri 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 WeSmariti – true zogierT warmodgenaSi - 1,
mcdari- false – 0.
striqonuli literali warmoadgens simboloebis Tanmimdevrobas romelic
moTavsebulia ‘ ‘ an “ “ simboloebSi. magaliTad “ Sedegi” an ’Sedegi’. carieli
striqonuli cvladi aRiniSneba ‘ ‘ an “ ” simboloebiT.
cvladi
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.
aq cvladis tipi ar aris gansazRvruli da is cnobili gaxdeba mas Semeg rac
mas mieniWeba mniSvneloba es ki xdeba miniWebis operatoris saSualebiT.
magaliTad:
var t1=345
am SemTxvevaSi t1 cvlads miniWebuli aqvs mniSvneloba 345.
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
49
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.
cvladebis moqmedebis are
JavaScript-Si arsebobs ori tipis cvladebi globaluri da lokaluri. globaluri
cvladi gansazRvrulia mTel programaSi, lokaluri cvladi gansazRvrulia mxolod
konkretuli funqciis SigniT.
gamosaxuleba
gamosaxuleba Sedgeba literalebisagan, cvladebisagan, moqmedebaTa
niSnebisagan da frCxilebisagan. gamosaxulebis gamoTvlis Semdeg miiReba erTi
mniSvneloba, romelic SeiZleba iyos ricxvi, striqoni, an logikuri.
gamosaxulebaSi arsebul yvela cvladi unda iyos gansazRvruli. 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 operaciis niSnebisagan.
magaliTad, gamosaxuleba a*b -Si, a da b operandebia, * operaciis niSania.
operaciebi arseboben unaruli (erTadgiliani) da binaruli (oradgiliani).
gamosaxuleba Caiwereba +A, Tu + - unaruli operaciis aRniSvnaa, an A+B. Tu + -
binaruli operaciis aRniSvnaa.
gamoTvlili mniSvnelobis mixedviT, gamosaxuleba SeiZleba arsebobdes
ariTmetikuli, logikuri da striqonuli.
ariTmetikuli gamosaxulebis Casawerad gamoiyeneba Semdegi operatorebi:
+ Sekreba
- gamokleba
* gamravleba
/ gayofa
%naSTis miReba gayofis Sedegad
++ operandis mniSvnelobis gazrda 1-iT
-- operandis mniSvnelobis Semcireba1-iT
operaciebis Sesruleba xdeba marcxnidan marjvniv ariTmetikuli operaciebis
prioritetis mixedviT.
50
JavaScrip-Si gamoiyeneba operatorebis Caweris Semoklebuli 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. isini 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 – mniSvneloba 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
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 (SeerTebis) 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):
51
inkrementi ++
dekrementi --
uaryofa !
unaruli minusi -
gamravleba *
gayofa, gayofa naSTis SenaxviT /,%
gamokleba -
Sedareba <,>,<=,>=
toloba ==
ar aris toli !=
logikuri da &&
logikuri an ||
miniWeba +, +=, -=, *=, /=, %=,
!=
monacemTa tipebis gardaqmna

monacemTa tipebi gavlenas axdens operatorebis Sesrulebaze,
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”
radgan meore operandis tipi aris striqonuli e.i Sedegi iqneba striqonuli tipis. pirveli
operandi avtomaturad gardaiqmneba 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 iqneba 34
parseInt (“23.56”) Sedegi iqneba 23
e. i meore SemTxvevaSi Sedegis damrgvaleba moxdeba mTelamde.
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.
52
length niSnavs rom daTvlili iqneba simboloebis raodenoba. magaliTad,
“2500” simboloebis raodenoba masSi tolia 4-is. length - sigrZe , misi tipi aris
ricxvi da striqoni.
HTML dokumentSi programis Casma

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 parametrebi, erT-erTi
parametria language, romelic gansazRvravs programis enas. JavaScript enisaTvis
misi mniSvnelobaa “JavaScript”. am atributis gamoyenebas aqvs saxe:
<script language=”JavaScript”>
<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 gamoyenebuli iqnas
komentarebis operatori. mas aqvs saxe . damxuravi tegis win ismeba //
simbolo.
e.i

</script>
SevadginoT marTkuTxa samkuTxedis farTobis gamosaTvleli programa,
roca mocemulia misi kaTetebi
<HTML>
<HEAD>
<TITLE> pirveli programa</TITLE>
</HEAD>
<BODY>
<P> programa </P>
<script>

53
</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.
funqcia
programis Sedgenis dros gamoiyeneba logikurad damoukidebeli 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.
funqcia esaa is samSeneblo bloki, romelic gamoiyeneba mravaljer.
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, ... vn) {s}
maSin funqciis gamoZaxebas unda qondes saxe:
F (e1,e2, ... ,en)
sadac, e1,e2, ... en– gamosaxulebebia romlebic faqtiur parametrebs
(argumentebs) gansazRvraven.
v1,v2, ..., 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 aucilebelia anu funqciis
gamoZaxebas aseT SemTxvevaSi eqneba saxe:
F ().
SeniSvna: yvela gansazRvra da funqcia unda Setanili iyos <HEAD>
ganyofilebaSi.
54
ganvixiloT marTkuTxa samkuTxedis farTobis gamoTvlis programa funqciis
gamoyeenebiT, rodesac mocemulia misi kaTetebi.
<HTML>
<HEAD>
<TITLE> programa funqciis gamoyenebiT </TITLE>

</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 faqtiuri mniSvneloba
da Sesruldeba funqciis tani. miRebuli mniSvneloba Tavsdeba dokumentSi Writen
operatoriT.
ganxilul SemTxvevebSi momxmarebels ar qonda SesaZlebloba Seetana
mniSvnelobebi da mieRo Sesabamisi Sedegi.
formebi
interaqtiuri dokumentebis umravlesoba (kavSiri Web gverdsa da
momxmarebels Soris) SeiZleba Seqmnili iyos formebis saSualebiT. es is sadgilia
sadac damalulia nebismieri brauzeris interaqtiuri SesaZleblobebi: teqsturi veli,
Rilakebi, gadamrTvelebi, siebi da a.S..
55
momxmareblis moqmedeba (mag. mausis Rilakze daWera) iwvevs garkveul
process. am procesis damuSaveba xdeba formebis elementebiT. procesis
damuSavebeli parametris saxeli iwyeba on TavsarTiT. magaliTad Click procesis
damuSavebis parametrs eqneba saxe onClick.
procesis parametrebi SeiZleba iyos operatorebi, procesis mniSvnelobebi ki
funqciis gamoZaxebebi, romlebic unda Sesruldes rodesac es procesi gaaqtiurdeba.
davuSvaT gvsurs SevqmnaT forma romelSic fuZe da simaRlis velebi
gamoiyeneba Sesabamisi mniSvnelobis Sesatanad. garda amisa formaSi SevqmnaT
Rilaki gamoTvla. am Rilakze daWeriT miviRebT samkuTxedis farTobs. aseT
SemTxvevaSi 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>
</HEAD>
<BODY>
<p> samkuTxedis farTobis gamoTvla </P>
fuZe: <input type=”text” size=5 name=”st1”><hr>
simaRle: <input type=”text” size=5 name=”st2”><hr>
<input tupe=“button” value=gamoTvla
onClick=”Fart (document.form1.st1.value,
document.form1.st2.value,)”>
</FORM>
</BODY>
56
</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
formaze mimarTvisas SeiZleba ar iyos miTiTebuli document obieqti.
ganxilul magaliTSi formis pirveli striqoni SeiZleba asec iyos Cawerili:
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
pirobiTi operatori if
mas aqvs saxe
if (piroba) {operatori an operatorebi}
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 Caweril
operators. Tu piroba mcdaria maSin figurul frCxilebSi Cawerili operatorebi
ignorirdeba da marTva gadaecema figuruli frCxilebis Semdeg Caweril operators.
pirobiTi operatori if...else

mas aqvs saxe
if (piroba) {operatori an operatorebi} Tu piroba WeSmaritia
57
else
{operatori an operatorebi} Tu piroba mcdaria
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:

1. gamovTvaloT sam a, b, da c ricxvebs Soris maqsimaluri mniSvneloba.
<HTML>
<HEAD>
<TITLE> maqsimaluri mniSvnelobis gamoTvla </TITLE>

</script>
</HEAD>
<BODY>
<H4>maqsimaluri mniSvnelobis gamoTvla </H4>
ricxvi 1: <input type=”text” size=8 name=”num1”><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>
58
<HTML>
2. SevadginoT programa romelic gamoiTvlis maqsimalur da minimalur

mniSvnelobebs sami ricxvidan.
<HTML>
<HEAD>
<TITLE> maqsimaluri da minimaluri mniSvnelobis gamoTvla
</TITLE>

</script>
</HEAD>
<BODY>
<H4>maqsimaluri da minimaluri mniSvnelobis gamoTvla </H4>
<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>
59
<HTML>
3. SevadginoT programa romelic mocemul oTx a,b,c, d ricxvebs
Ddaaalagebs zrdadobis mixedviT
algoriTmi: Tavidan edareba ori a da b cvladebis mniSvnelobebi. Tu a meti
aRmoCndeba b-ze cvladebi cvlian 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 edareba c da d-s
saWiroebisas cvladebi cvlian mniSvnelobebs. bolos c edareba d-s.
<HTML>
<HEAD>
<TITLE>oTxi ricxvis mniSvnelobis dalageba</TITLE>

</script>
</HEAD>
<BODY>
<H4> oTxi ricxvis mniSvnelobis dalageba zrdadobis mixedviT </H4>
60
<input tupe=“button” value=dalageba onClick=”sortval(form1)”> <hr>
<input type =”reset” value= gasufTaveba>
</FORM>
</BODY>
<HTML>
ciklebi
ciklebi aRniSnavs gansazRvruli moqmedebebis ganmeorebiT 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
}
kvadratuli frCxilebi miuTiTebs rom maTSi Cawerili operatorebi ar arian
aucilebeli rom iqnan Setanili
sawyisi mniSvneloba- gansazRvravs ciklis mTvlelis sawyis mniSvnelobas;
piroba- igulisxmeba iseTive gamosaxuleba rogorc if operatorSi.
cvlilebis biji- warmoadgens operators, romelic sruldeba yoveljerze ciklis
SigniT Sesasrulebeli operatorebis Sesrulebis Semdeg.
masivebi
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 mimarTvisaTvis saWiroa masivis saxeli da misi indeqsis saxeli.
masivis elementebi SeiZleba iyos nebismieri tipis, maT Soris obieqtebic.
JavaScript-Si erTi masivis elementebi SeiZleba 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)
61
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].
rom mivaniWoT masivis elementebs konkretuli mniSvnelobebi unda
gamoviyenoT miniWebis operatori. magaliTad:
USS[0]=”Arizona”
USS[1]=”Arkansas”
da a.S
s a v a r j i S o e b i:
1. qvemoT CamoTvlili cvladebiis aRweridan da inicializaciidan 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
sarCevi
WEB gverdebis proeqtireba
Sesavali......................................................................................- 3 -
ra aris saWiro WEB gverdis Sesaqmnelad................................- 3 -
ZiriTadi mcnebebi......................................................................- 5 -
sabazo tegebi..............................................................................- 6 -
62
abzacis formatireba....................................................................- 8 -
teqstis formatireba......................................................................- 9 -
horizontaluri xazi.....................................................................- 11 -
laboratoriuli samuSao.............................................................- 13 -
grafikuli obieqtis Casma WEB gverdze...................................- 14 -
suraTisa da teqstis urTierTmedebareoba.................................- 16 -
CamonaTvali da numeracia.....................................................- 22 -
moZravi striqoni......................................................................- 26 -
cxrilebi.....................................................................................- 29 -
ujrebis formatireba...................................................................- 31 -
hiperkavSirebi..........................................................................- 36 -
stilebis Seqmna da gamoyeneba CSS.............................................- 41 -

CSS struqtura...........................................................................- 43 -
CSS Tvisebebi..........................................................................- 46 -
daprogramebis ena JavaScript......................................................- 51 -

literalebi...................................................................................- 51 -
cvladi........................................................................................- 51 -
gamosaxuleba...........................................................................- 52 -
monacemTa tipebis gardaqmna...............................................- 55 -
HTML dokumentSi programis Casma.....................................- 56 -
funqcia.....................................................................................- 57 -
formebi.....................................................................................- 59 -
pirobiTi operatori if.................................................................- 61 -
pirobiTi operatori if...else........................................................- 61 -
ciklebi.......................................................................................- 65 -
masivebi...................................................................................- 65 -
savarjiSoebi.............................................................................- 66 -
63
gamoyenebuli literatura................................................................- 68 -
gamoyenebuli literatura
1. J. Neiderst "Learning Web Design" March 2001.
2. N. Heinle, M. Webb " Designing with JavaScript" June 2001.
3. М. Дмитриева JavaScript М.: 2002
4. Дэнни Гудман JavaScript М.: 2002
5. Вайк А.Р, Джиллиам Джейсон Д. JavaScript М.: 2004
© gamomcemloba ,,teqnikuri universiteti’’, 2006
64
koreqtori
kompiuteruli uzrunvelyofa
ibeWdeba avtoris mier warmodgenili saxiT
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
65

HTML & Javascript

Uploaded by

Copyright:

Available Formats

HTML & Javascript

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML & Javascript

Uploaded by

Copyright:

Available Formats

saqarTvelos teqnikuri universiteti

wigni warmoadgens damxmare saxelmZRvanelos saganSi `veb

recenzentebi: prof. z. gasitaSvili

© gamomcemloba @@`teqnikuri universiteti~ 2006

WEB gverdebis proeqtireba

ra aris saWiro WEB gverdis Sesaqmnelad

Cven mier Seqmnili dokumenti damaxsovrebis dros teqsturi

Cven mier Seqmnili Web gverdis daTvaliereba xdeba internet-

SeniSvna: Tu dagvWirda Web gverdis redaqtireba vbrundebiT

velidan Refresh brZanebiT.

tegis saxeli - romelic gansazRvrava Tu romel obieqtze xdeba

tegis saboloo formati:

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

html dokumentis zogadi struqtura:

arsebobs feris miTiTebis ori gza:

<BR> - tegis saSualebiT xdeba axal striqonze gadasvla. am

6pt 8pt 10pt 12pt 14pt 18pt 27pt

Sriftis feris sabazo mniSvnelobaa – Savi.

SesaZlebelia HTML dokumentis sabazo parametrebis Secvla

tegi dasaxeleba funqcia

gamoiyeneba xazis sigrZis miTiTebis ori varianti:

xazis mdebareobis arCeva SesaZlebelia ALIGN=Left /

<hr size=7 NOSHADE>

picture5.g <img src=../Old/picture5.gif>

suraTisa da teqstis Border

saqarTvelos teqnikuri universiteti

Tu gvinda mdebareobis Secvla suraTis aRmwer tegSi unda

saqarTvelos teqnikuri universiteti

saqarTvelos teqnikuri universiteti

zemoT aRniSnul samive SemTxvevaSi suraTis gaswvriv

Tu zemoT ganxilul programaSi SevcvliT suraTis

Tu ramodenime striqonis Semdeg gvinda suraTis gaswvriv

aseve SesaZlebelia suraTis Casma web gverdis fonad.

zogadad CamonaTvals aqvs Semdegi saxe:

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

im SemTxvevaSi Tu gvWirdeba CamonaTavlis gadanomvra,

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

aseve SesaZlebelia numeraciis sawyisi cifris arCeva START

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

WIDTH: samoZrao aris sigrZe

moZrav striqonSi teqstis moZraobis mimarTulebis, stilis,

DIRECTION moZraobis mimarTuleba

SLIDE – moZraoba sruldeba mxolod

LOOP gansazRvravs moZraobis ganmeorebis

teqsti moZraobs qvevidan zeviT da moZraoba ganmeordeba 6-

<TR> <TD> . . . </TD> <TD> . . . </TD> <TD> . . . </TD> </TR>

mag.: <table width=80>

cxrilis formatirebisaTvis gamoiyeneba Semdegi atributebi:

<table border=2 width=80%>

3. Height=ricxvi an % - cxrilis simaRle

4. Bgcolor=feris nomeri an saxeli - fonis feri

5. Background=failis saxeli - grafikuli gamosaxulebis Casma

7. CellSpasing=ricxvi - daSoreba ujrebs Soris

<table border=2 width=300 height=150>

 horizontaluri mdebareobis arCeva xdeba atributiT: Align= Left /

<table border=2 width=80%>

 vertikaluri mdebareobis arCeva xdeba atributiT: Valign= Top /

<table border=2 height=150>

4. teqstis Sriftisa da stilis aRwera saWiroa yvela ujraSi