You are on page 1of 91

saqarTvelos teqnikuri universiteti

Tea Todua, laSa verulava

WEB-teqnologiebi
HTML
I nawili

damtkicebulia stu-s
saswavlo-meToduri
sabWos mier
Tbilisi
2006
uak 681.142

saxelmZRvaneloSi ganxilulia HTML-is, web-sivrceSi informaciis


warmodgenis yvelaze mZlavri da universaluri saSualebis, praqtikuli
gamoyenebis sakiTxebi.
saxelmZRvanelo gaTvaliswinebulia bakalavriatis studentebisa
da magistrantebisaTvis, agreTve is gamoadgeba masSi ganxiluli
sakiTxebiT dainteresebul yvela pirs.

recenzentebi: t.m.d. prof. o. verulava


prof. z. baiaSvili

2
© gamomcemloba `teqnikuri universiteti~, 2006
ISBN 99940-48-93-7
sarCevi

1. Sesavali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2. HTML dokumentis Senaxva da gaxsna . . . . . . . . . . . . . . . . . . . . . . . . . 5
3. HTML dokumentis struqtura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
4. ferebi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
5. abzacebi da saTaurebi HTML dokumentSi . . . . . . . . . . . . . . . . . . . 9
6. horizontaluri xazi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1
7. winaswar daformatebuli teqstis gamoyeneba ............... 1
2
8. Sriftis daformateba ....................................... 1
3
9. tegi Basefont ................................................. 1
5
10. Font . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
5
11. siebi ........................................................ 1
8
12. gamosaxuleba HTML dokumentSi ............................ 2
2
13. bmuli ....................................................... 2
5
14. cxrilebi ................................................... 2
9
15. cxrilebis magaliTebi ...................................... 3
5
16. specialuri simboloebi .................................... 4
7
17. sazRvrebi brauzeris fanjaraSi ........................... 4
8
18. morbenali striqoni ........................................ 4
9
19. freimebi ..................................................... 5
3
0
20. konteineri Frameset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1
21. freimebis parametrebis gansazRvra ......................... 5
1
22. tegi <Frame> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3
23. freimebis gamoyenebis ramdenime martivi magaliTi ........ 5
4
24. freimebis garegnuli saxis modifikacia ................... 5
8
25. freimis saxelis gansazRvra ................................ 6
0
26. obieqtebi HTML dokumentSi ................................ 6
4
27. formebi ..................................................... 6
7
28. formis tegebTan muSaoba ................................... 6
8

1. Sesavali

World Wide Web (obobas msoflio qseli, ablabuda, www) – internetis yvelaze
popularuli samsaxuria.
World Wide Web – erTiani sainformacio sivrcea, romelic web-serverebze
daculi aseuli milioni erTmaneTTan dakavSirebuli eleqtronuli dokumentisagan
Sedgeba. Web – sivrcis Semadgenel calkeul dokuments web – gverdi ewodeba.
Web – gverdebis dasaTvalierebel specialur programebs brauzerebi (inglisuri
sityvidan browse – gadaTvaliereba, gadaxedva, gadafurcvla) ewodebaT. pirveli
brauzeri – Mosaic, 1993 wels Seiqmna ilinoisis universitetis superkompiuterebis
erovnul centrSi (NSCA) universitetis studentebisa da programistebis jgufis mier,
romelsac xelmZRvanelobda mark andriseni. Mosaic qselSi saocari siswrafiT
vrceldeboda, erTi wlis ganmavlobaSi daaxloebiT ori milioni adamiani
sargeblobda am brauzeriT. maTi umravlesoba internet-gverdebis daTvalierebiT
iyo dakavebuli, mxolod mcire nawili Seudga web-gverdebis Seqmnas. Mosaic – is

4
Semdeg sxva axali brauzerebic gamoCndnen. TiToeuli maTgani Tavis
winamorbeds aRemateboda axali Html brZanebebis raodenobiT.
mark andrisenma datova NSCA da jim klarkTan erTad daafuZna Netscape
Communications Corporation. umravlesoba programistebisa, romlebic muSaobdnen
Mosaic-ze, SeuerTdnen maT, ris Sedegadac Zalian swrafad gamoCnda brauzer
Netscape Navigator (NN)-is pirveli versia. axali Tvisebebis didi raodenobisa da
sacdeli versiis ufaso gavrcelebis gamo NN male gaxda popularuli. es yvelaferi
uyuradRebod ar darCenia kompania Microsoft-s. 1995 wels man gamouSva
brauzeri Internet Explorer (IE).
imisaTvis, rom Tavad SeqmnaT web – gverdebi, saWiroa HTML (Hypertext
Markup Language)-is Seswavla. es saxelmZRvanelo dagexmarebaT safuZvlianad
daeufloT am teqnologias.

2. HTML dokumentis Senaxva da gaxsna


upirveles yovlisa, SeqmeniT calke saqaRalde Tqveni momavali web
gverdisaTvis. Semdeg gaxseniT Notepad (start→programs→accessories→notepad) da
akrifeT masSi teqsti:
magaliTi:
<html>
<head><title>My first page</title></head>
<body>
Hello!
</body>
</html>
SeinaxeT faili Semdegnairad:
• File → Save as
• Semdeg SeitaneT dokumentis saxeli, magaliTad, index.html (ar akrifoT
mxolod index; aucileblad miuTiTeT gafarToeba html)
gaxseniT brauzeri, magaliTad, Internet Explorer da daaTvaliereT Tqvens mier
Seqmnili dokumenti.
File → open→browse→index.html

5
HTML dokumentSi cvlilebis Setanis SemTxvevaSi, imisaTvis, rom dainaxoT
rogor gamoiyureba saxeSecvlili varianti, brauzeris fanjaraSi daaWireT Rilaks F5
an Internet Explorer-is meniuSi View→Refresh.

3. HTML dokumentis struqtura


HTML dokumentis yvelaze mniSvnelovani elementia <html>. is iwyebs HTML
dokuments, xolo </html> warmoadgens HTML dokumentis ukanasknel striqons.
amgvari tipis Canawerebs, romlebic iwyeba niSniT `<” da mTavrdeba `>”
niSniT, ewodebaT HTML tegebi. tegebi <html> da </html> aRniSnaven, rom maT
Soris mdebare striqonebi warmoadgenen erTian HTML dokuments. Ees
mniSvnelovania, radgan dokumenti warmoadgens Cveulebriv teqstur fails ASCII
formatSi. am tegebis gareSe brauzers an sxva msgavs programas ar SeuZlia
dokumentis formatis identificireba da misi sworad interpretireba.
<head> …</head> tegi miuTiTebs dokumentis saTauris dasawyissa da
dasasrulze. yvelaferi, rac moTavsebulia <title> da </title>-s Soris,
warmoadgens dokumentis saxelwodebas, romelic Cndeba brauzeris fanjris

saTauris zolSi.
<body>… </body> miuTiTebs html dokumentis tanis (ZiriTadi nawilis)
dasawyissa da dasasrulze. am tegSi iwereba yvelaferi is, ris ganTavsebasac
web-gverdze vapirebT (teqsti, suraTebi, cxrilebi da a.S).
komentarebi ar aisaxebian ekranze brauzeris mier.
<! - - erTstriqoniani komentari - - >
<! mravalstriqoniani komentari>
<tegi></tegi> - msgavsi konstruqciis tegebs hqviaT tegi-konteinerebi.
isini SeiZleba Seicavdnen sxva tegebs da teqsts. zogierTi tegi, magaliTad tegi
<br> ar moiTxovs daxurvis tegs.
miaqcieT yuradReba tegebis gaxsnisa da daxurvis mimdevrobas:
<tegi1> <tegi2> <tegi3>. . . </tegi3> </tegi2> </tegi1>. sxva mimdevrobiT
tegebis ganlagebam SeiZleba mogceT Secdoma.
tegebi SegiZliaT daweroT rogorc didi, aseve patara asoebiT, brauzerisTvis
amas mniSvneloba ara aqvs.

4. ferebi

6
Html-Si ferebi ganisazRvreba cifrebiT TeqvsmetobiT kodSi. ferebis gama
eyrdnoba sam ZiriTad fers: wiTels, mwvanesa da lurjs da aRiniSneba RGB-Ti.
feri SeiZleba aRiweros rogorc misi dasaxelebiT, aseve misi mniSvnelobiT RGB
(Red, Green, Black) palitraSi. TiToeuli ferisaTvis mieTiTeba TeqvsmetobiTi
mniSvneloba 00-dan FF–mde, rasac aTobiT sistemaSi Seesabameba 0-255
diapazoni. Semdeg es mniSvnelobebi erTiandebian erT ricxvSi, romelTa win
iwereba # simbolo. magaliTad: ricxvi #800080 aRniSnavs iisfers.
ganvixiloT ramdenime magaliTi: text=#FFFFFF. wiTliT, mwvaniTa da lurjiT
gajerebuloba erTidaigivea, (FF aris ricxv 255-is TeqvsmetobiTi warmodgena),
Sedegi - TeTri feri. text = #000000, wiTliT mwvaniTa da lurjiT gajerebuloba am
SemTxvevaSic erTidaigivea (00). Sedegi - Savi feri. text = #FF0000. wiTliT
gajerebuloba - FF, mwvaniT da lurjiT - 00. Sedegad miiReba wiTeli feri.
qvemoT mocemulia Teqvsmeti standartuli feri, Tavisi Sesabamisi
TeqvsmetobiTi kodebiT:
feri F kodi
Black #000000
Maroon #800000
Green #008000
Olive #808000
Navy #000080
Purple #800080
Teal #008080
Gray #808080
Silver #C0C0C0
Red #FF0000
Lime #00FF00
yellow #FFFF00
blue #0000FF
Fuchsia #FF00FF
Aqua #00FFFF
White #FFFFFF

magaliTi: <html>
<head>
<title> My html Document </title>

7
</head>
<body>
Hello! This is my first page
<br>
<font color =“#000080”> Welcome! </font>
</body>
</html>
tegi <font></font> mravalfunqciuri tegia. SemdgomSi mas ufro dawvrilebiT
ganvixilavT.
teqstis feris miTiTeba sxvagvaradac SeiZleba: <body text="red">. es niSnavs,
rom mTeli teqsti iqneba wiTeli feris, garda im teqstisa, romelic moTavsebulia
<font></font> tegebs Soris. Sesabamisi feris miuTiTeblobis SemTxvevaSi teqsti
iqneba Savi feris.
dokumentis foni ganisazRvreba Semdegnairad: <body bgcolor=”C0C0C0”>
sabolood, dokumenti miiRebs saxes:
magaliTi: <html>
<head>
<title>My html Document </title>
</head>
<body text="#FF0000" bgcolor="#C0C0C0">
Hello! This is my first page
<br>
<font color="#000080"> Welcome!</font> My name is Tea
</body>
</html>
am magaliTSi teg <body>-s ori atributi aqvs: text da bgcolor. teg <body>-s sxva
atributebic gaaCnia:
Link – bmulis feri;
Alink – bmulis feri masze mausiT dawkapunebis dros;
Vlink – ukve nanaxi bmulis feri (mag.: <body link=”black” vlink=”blue”>);
Background – fonis suraTi (mag.: <body background=”book.gif”>);
Topmargin, bottommargin – dokumentis zeda da qveda mindvrebis sigrZe
(Internet Explorer);
Rightmargin, Leftmargin – dokumentis marjvena da marcxena mindvrebis
sigrZe (Internet Explorer);

8
Marginheight-dokumentis zeda da qveda mindvrebis sigrZe (Netscape
Navigator);
Marginwidth - dokumentis marjvena da marcxena mindvrebis sigrZe (Netscape
Navigator);
body-s bolo eqvs parametrs dawvrilebiT ganvixilavT qvemoT.

5. abzacebi da saTaurebi HTML dokumentSi

Html-s aqvs eqvsi sxvadasxva zomis saTauris Seqmnis SesaZlebloba. maT


miniWebuli aqvT nomrebi 1-dan 6-is CaTvliT. pirveli donis saTauri H1 yvelaze
msxvilia. Sesabamisad H6 yvelaze wvrilia. <H1> tegs aucileblad unda hqondes
misi Sesabamisi daxurvis tegi </H1>.
<p>…</p> wyvili aRwers abzacs. yvelaferi rac moTavsebulia <p> da </p>-s
Soris, aRiqmeba rogorc erTi abzaci.
saTaurebisa da abzacis tegebis meSveobiT SesaZlebelia teqstis gasworeba
marcxena kididan, marjvnidan, marjvnidan da marcxnidan erTdroulad da
centrireba. magaliTad:
LEFT - teqsti gaswordeba marcxena mxridan.
CENTER - teqsti moTavsebuli iqneba centrSi
RIGHT - teqsti gaswordeba marjvena mxridan
JUSTIFY - teqsti gaswordeba orive mxridan.
imisaTvis, rom gadaxvideT momdevno striqonze mimdinare striqonis
nebismier adgilas, Html-Si arsebibs striqonis gawyvetis tegi <Br>. abzacis
tegisgan gansxvavebiT <Br> striqonsa da striqons Soris ar tovebs adgils. <Br>-s
ara aqvs Sesabamisi daxurvis tegi.
magaliTi:
<html>
<head><title>html document’s formatting </title></head>
<body>
<H1>Europe </H1>
<H2 ALIGN = "center"> England </h2>
<p align = "justify">
London is the capital of England and of Great Britains too. It is an ancient city.

9
When the Romans come to conquer the country, there already was a settlement
which they called LYindin, Later Londonium. Finally it got its present name. The
birthplace of London is the City, today it is the business heart of London. Most
banks, large offices and the stock are situated in the city. Millions of people come
here to do business, but not much people live here. The Political centre of London is,
of course, the House of Parliament on the bank of the Thames and the street called
Downing street. </p>
London consists of East End and West End. The West End is older. <br>
The East End is the induistrial part of London.
<H2 ALIGN = "center"> Georgia </h2>
<p align="justify">Georgians do not call themselves Georgians but Kartvelebi and their
land Sakartvelo, These names are derived from a pagan god called Kartlos, said to be
the father of all Georgians. The foreign name Georgia, used throughout Western Europe,
is mistakenly believed to come from the country's patron saint, St. George. Actually it is
derived from the names Kurj or Gurj, by which they are known to the Arabs and modern
Persians. Another theory purports that the name comes from the Greek geo (earth),
because when the Greeks came to Georgia they saw the Georgians working the land.
The Classical world knew the inhabitants of eastern Georgia as Iberians, thus confusing
the geographers of antiquity who thought this name applied only to the inhabitants of
Spain.</p>
</body>
</html>

10
6. horizontaluri xazi
dokumentis nawilebad dayofis erT-erT meTods warmoadgens horizontaluri
xazebis gavleba. is vizualurad xazs usvams gverdis ama Tu im aris
dasrulebulobas. Eelementi <HR> reliefuri horizontaluri xazis gavlebis
saSualebas iZleva. <HR>-s ara aqvs misi daxurvis Sesabamisi </HR>.
horizontalur Mxazamde da mis Semdeg, avtomaturad Cndeba carieli striqoni.
<HR>-is atributebia:
ALIGN – xazs asworebs marcxena an marjvena mxridan an centrSi.
Sesabamisad, iRebs mniSvnelobebs left, right, center.
Width – xazis sigrZes ayenebs piqselebSi an procentebSi brauzeris fanjris
siganisgan damokidebulebiT. ukanasknel SemTxvevaSi ricxviTi mniSvnelobis
Semdeg iwereba %-is niSani.
SIZE – ayenebs xazis sisqes piqselebSi.
Noshade – cvlis xazis reliefurobas.
Color – uTiTebs xazis fers. gamoiyeneba RGB formati an standartuli saxeli.
magaliTi: <html>

11
<head>
<Title> My students </Title></head>
<Body>
<H1 ALIGN = left>My Students' names </H1>
<Br>
<H2 ALIGN = LEFT> Girls </H2>
Nino <Br>
Maiko <Br>
Shorena <Br>
<HR width = 50% size = 6 ALIGN = left color = RED>
<H2 ALIGN = LEFT> Boys </H2>
Levani <br>
Dato <br>
Rezo <br>
<HR width = 50% size = 6 ALIGN = left color =Navy>
<Body>
</html>
miRebul dokuments eqneba Semdegi saxe:

My Students' names

Girls
Nino
Maiko
Shorena

Boys
Levani
Dato
Rezo

7. winaswar daformatebuli teqstis gamoyeneba

12
yovelTvis ar aris aucilebeli abzacisa da striqonis gawyvetis tegebis
gamoyeneba. HTML-s aqvs specialuri teg-konteineri <PRE>, sadac SeiZleba
Caisvas teqsti, romelsac winaswar aqvs micemuli sasurveli forma. am
konteineris gamoyenebis mniSvnelovani mxarea programuli kodis (C, C++ da
a.S.) didi blokebis ekranze martivad gamotanis saSualeba. es tegi aseve
dagexmarebaT leqsebis publikaciis drosac.
davuSvaT, brauzeris fanjaraSi unda miviRoT:
tea( etRastr, hh, ww, jjj);
}
while(StartAbsc != 0 || StartOrd != 0);
StartofLine = memEndLine + 15;
EndofLine = height_pix;
start = 0;
memmemEndLine=memEndLine;
if(k) break;
}
es amocana Zalian martivad wydeba:
<html>
<head>
<title> code of program </title>
</head>
<pre>
tea (etRastr, hh, ww, jjj);
}
while(StartAbsc != 0 || StartOrd != 0);
StartofLine = memEndLine + 15;
EndofLine = height_pix;
start = 0;
memmemEndLine=memEndLine;
if(k) break;
}
</pre>
</body>
</html>

13
8. Sriftis daformateba
ganvixiloT Sriftis daformatebisTvis saWiro tegebi:
<B> muqi Srifti </B;
<I> daxrili Srifti </I>;
<S> gadaxazuli teqsti </S>;
<U> xazgasmuli teqsti </U>;
<TT> sabeWdi manqanis Sriftis msgavsi Srifti </TT>;
<SUB>qveda indeqsi </SUB>;
mag.: 2H<Sub>2</Sub>+O<Sub>2</sub>=2H<Sub>2</Sub>O; brauzeris fanjaraSi
miiReba 2H2+O2=2H2O.
<Sup> zeda indeqsi </Sup>; magaliTad, piTagoras Teorema:
a<Sup>2</Sup>+b<Sup>2</Sup>=C<Sup>2</Sup>
<BIG> didi zomis Srifti </BIG>;
<SMALL> mcire zomis Srifti </SMALL>;

magaliTi:
<html>
<head>
<title>fonts</title>
</head>
<body bgcolor=#FFFFFF>
<br><font face="Sylfaen"><b>გამუქებული ტექსტი</b><br>
<br><font face="Sylfaen"><i>დახრილი ტექსტი</i><br>
<br><font face="Sylfaen"><u>ხაზგასმული ტექსტი</u><br>
<br><font face="Sylfaen"><s>გადახაზული ტექსტი</s><br>
<br> 2H<Sub>2</Sub>+O<Sub>2</sub>=2H<Sub>2</Sub>O</br>
<br>a<Sup>2</Sup>+b<Sup>2</Sup>=C<Sup>2</Sup></br>
</body>
</html>

miviRebT:

14
9. tegi Basefont
tegi <Basefont> gansazRvravs im ZiriTad Srifts, romliTac unda aisaxos teqsti
brauzeris fanjaraSi. SemdgomSi Tqven advilad SegiZliaT dokumentis nebismier
nawilSi SecvaloT Srifti teg <font>-is gamoyenebiT. daxurvis teg </font>-is Semdeg
<Basefont>-is moqmedeba aRdgeba. teg Basefont-is atributebis mniSvneloba
SeiZleba Seicvalos dokumentis nebismier adgilas axali Basefont tegiT. <Basefont>-
is moqmedeba ar vrceldeba teqstze, romelic cxrilebSi an html–is sxva
gancalkevebul elementebSia moqceuli. <Basefont>-s ara aqvs Sesabamisi
</Basefont> tegi.

parametrebi aRwera
size gansazRvravs Sriftis bazur zomas, SesaZlo
mniSvnelobebia mTeli ricxvebi 1-dan 7-is
CaTvliT.
face gansazRvravs Sriftis saxeobas.

10. Font

15
tegi <Font> saSualebas gvaZlevs SevcvaloT Sriftis feri, zoma an tipi. <Font>
da </Font> tegebis gareT gamoiyeneba fonti, romelic mieTiTeba element
<Basefont>-iT.

parametrebi aRwera
size gansazRvravs Sriftis zomas.
SesaZlo mniSvnelobebi: a) mTeli ricxvebi 1-dan 7-is
CaTvliT. b) fardobiTi zoma ganisazRvreba bazur
zomasTan mimatebis gziT, romelic ganisazRvreba
Basefont size-iT.
face gansazRvravs Sriftis saxeobas.
Color gansazRvravs teqstis fers.
Face parametri emsaxureba im Sriftis tipis miTiTebas, romelic unda gamoCndes
brauzeris fanjaraSi (Tu kompiuterSi arsebobs aseTi saxis Srifti). SesaZlebelia
rogorc erTi, aseve ramdenime Sriftis erTdroulad miTiTeba. es Zalian
mniSvnelovani Tvisebaa. radgan sxvadasxva sistemaSi SeiZleba iyvnen
TiTqmis identuri Sriftebi gansxvavebuli saxelwodebebiT. sxva mniSvnelovan
Tvisebas warmoadgens romelime Sriftis gamoyenebisadmi upiratesobis
miniWeba. Sriftebis sia ganixileba marcxnidan marjvniv. Tu momxmareblis
kompiuterze ar aris siaSi miTiTebuli pirveli Srifti, maSin iwyeba momdevno
Sriftis Zebna da a. S. Tu aseTi Srifti ar moiZebna, maSin mocemuli brZaneba
ignorirebuli iqneba da gamoiyeneba Srifti, romelic dayenebulia kompiuterSi
standartulad. miTiTebuli Sriftebis raodenoba ar unda aWarbebdes sams.

magaliTi:
<html>
<head><title> fonts </title>
</head>
<body>
There is a text
<Br>
<font face = “Verdana”, “Arial”, “Helvetica”>
Sample text
</font>
</body>

16
</html>
Size parametri gamoiyeneba Sriftis zomebis misaTiTeblad, pirobiT erTeulebSi 1-
dan 7-is CaTvliT. iTvleba, rom Sriftis zomis normaluri mniSvnelobaa 3. Sriftis
zoma mieTiTeba rogorc absoluturi (size = 2) aseve fardobiTi sididis saxiT (size = +
1)

magaliTi:
<html>
<head><title> font size </title>
</head>
<body>
<font size = 1> font size 1 </font><br><br><br>
<font size = 2> font size 2 </font><br><br><br>
<font size = 3> font size 3 </font><br><br><br>
<font size = 4> font size 4 </font><br><br><br>
<font size = 5> font size 5 </font><br><br><br>
<font size = 6> font size 6 </font><br><br><br>
<font size = 7> font size 7 </font><br><br><br>
</body>
</html>

miRebul Sedegs aqvs Semdegi saxe:

17
11. siebi
danomrili sia iqmneba teg <ol>-is daxmarebiT: <ol>…</ol>
magaliTi: <html>
<head>
<title> list of people </title>
</head>
<body>
<ol>
18
<li> Vano
<li> Dato
<li> Elene
</ol>
</body>
</html>
brauzeris fanjaraSi miRebul HTML dokuments eqneba Semdegi saxe:

1. Vano
2. Dato
3. Elene

</ol>- is atributebia start da type:


type = A numeraciis tipi (A,B,C da a.S).
type = a numeraciis tipi (a, b, c…)
type = I numeraciis tipi (I, II, III…)
type = i numeraciis tipi (i, ii, iii…)
type = 1 numeraciis tipi (1, 2, 3…)
Start = n numeracia iwyeba n-idan
markirebuli sia iqmneba teg <ul>-is saSualebiT: <ul>…</ul>
magaliTi: <html>
<head>
<title> List </title></head>
<body>
<ul>
<li> Programming
<li> Algorithm
<li> Design
</ul>
</body>
</html>
Sedegad miiReba markirebuli sia:

• Programming
• Algorithm
• Design

19
<ul> markers gaaCnia atributi type, romelic saSualebas iZleva wris nacvlad siaSi
Casvas kvadrati:
<ul type = square>
<li> first element </li>
<li> second element </li>
</ul>
gansazRvrebaTa sia iwyeba <DL> tegiT da mTavrdeba daxurvis </DL>
tegiT. TiTouli termini iwyeba </DT>-Ti, aRwera ki </DD>Ti.
<DL>
<DT> I termini
<DD> I gansazRvreba
<DT> II termini
<DD> II gansazRvreba
...
</DL>……
xSirad gansazRvrebaTa sias iyeneben odnav marjvniv teqstis gasawevad.
magaliTi:
<html>
<head>
<title> List and definition
</title>
</head>
<body>
<DL>
<DT> A
<DD> first symbol of alphabet
<DT> B
<DD> Second symbol of alphabet
<DT> C
<DD> third symbol of alphabet
</DL>
</body>
</html>

zemoT mocemuli kodis saSualebiT brauzeris fanjaraSi miiReba Semdegi suraTi:

20
A
first symbol of alphabet
B
Second symbol of alphabet
C
third symbol of alphabet

zemoT ganxiluli samive tipis siis erTmaneTSi Cadgma SesaZlebelia.


magaliTi: <html>
<head>
<title> More difficult lists </title>
</head>
<body>
<H1> Difficult list </H1>
<dl>
<dt> html
<dd> Hyper-text markup language
<ul>
<li> element1
<li> element2
<li> element3
</li>
</ul>
<dt>GOL
<dd>Georgia Online
<ol start=4>
<li>element 4;
<li>element 5;
<li>element 6;
</ol>
<dt> RAM
<dd> Random access Memory
<p> Network neighborhood
<p> computer Aided design </p>
</dl>
<body>
</html>

21
brauzeris fanjaraSi miRebul Sedegs aqvs Semdegi saxe:

12. gamosaxuleba HTML dokumentSi


gamosaxulebis Casasmelad Html dokumentSi gamoiyeneba tegi <img>:
<html>
<head>
<title> Image </title>
</head>
<body>
<H1> Image </H1>
<p><img src = “picture. gif" ALT = “This is picture” Height = 20 Width = 30 ></p>

22
</body>
</html>
img src = “Picture. gif”- dokumentSi svams gamosaxulebas, romelic mocemul
HTML dokumentTan erTad erT saqaRaldeSia moTavsebuli.
Height = 20A uTiTebs gamosaxulebis simaRles piqselebSi.
Width = 30 uTiTebs gamosaxulebis siganes piqselebSi.
gamosaxulebis zomebis Sesaxeb informaciis miTiTebiT, gverdis avtori
aCqarebs misi CamotvirTvis process, rac momxmarebels saSualebas aZlevs,
dokumenti ufro adre dainaxos. brauzeri iyenebs height-isa da width-is
mniSvnelobebs, raTa gverdze datovos adgili gamosaxulebisaTvis. rodesac
gamosaxuleba CamoitvirTeba, is gamoCndeba am rezervirebul adgilas. height-
isa da width-is mniSvnelobebis miTiTebis gareSe brauzers mouwevda mTlianad
gamosaxulebis CatvirTva, mere daiwyebda misi zomebis gamoTvlas,
ganaTavsebda ekranze da mxolod amis Semdeg daiwyebda ekranze danarCeni
elementebis moTavsebas.
teg <IMG>-is atributebi:
ALT - gamosaxulebis teqsturi alternativa;
ALIGN – gamosaxulebis garSemo moTavsebuli teqstis gasworeba;
Height - gamosaxulebis simaRle piqselebSi;
Width - gamosaxulebis sigane piqselebSi
Hspace - gansazRvravs gamosaxulebis marcxnidan da marjvnidan
Tavisufali adgilis zomas
Vspace - gansazRvravs gamosaxulebis zemoTa da qvemoTa mxridan.
Tavisufali adgilis zomas
SRC - uTiTebs gamosaxulebis URL-s
Border - uTiTebs gamosaxulebis CarCos zomas piqselebSi.
ALIGN –s SeuZlia miiRos nebismieri xuTi mniSvnelobidan: Left, Right, Top,
Middle, Bottom.
LEFT- suraTi iqneba marcxena mxares, teqsti ki daikavebs dokumentis
danarCen adgils suraTis marjvena mxares.
RIGHT – suraTi iqneba marjvniv, teqsti – marcxniv;
TOP – teqsti suraTis zeda kidis gaswvriv;
MIDDLE – teqsti suraTis centris gaswvriv;
BOTTOM – teqsti suraTis qveda kidis gaswvriv.

23
<img src = “giko.jpg” align=”left”> - niSnavs, rom suraTi moTavsebuli iqneba,
marcxena mxares. teqsti mas gars Semouvlis marjvnidan. imisaTvis, rom
suraTi moTavsdes marjvniv, teqsti ki – marcxniv, unda daiweros:
<img src = “giko.fpg” align = “right”>
rogorc ukve iciT, erTi tegis atributebi, SeiZleba erTdroulad iyos
gamoyenebuli:
<img src = “tt.gif” align = “left” hspace = “30”, vspace = “5” , alt = “My picture”>
es Canaweri aRniSnavs, rom suraTi moTavsebuli iqneba ekranis marcxena
mxares. teqsti mas Semouvlis marjvnidan, daSoreba teqstamde horizontalurad
- 30 piqseli, xolo vertikaluri mimarTulebiT 5 piqseli iqneba. Tu Tqven suraTTan
miitanT kursors, iq gaCndeba warwera: “My picture”.
Tqveni codnis gansazogadeblad SeqmeniT html dokumenti:
<html>
<head>
<title> html document
</title>
</head>
<body text = “#336699” bgcolor = “#000000”>
<H3 align = “center”> Hello, this is my html document</H3>
<br>
<font color = “#CC0000”> Welcome </font>
<p align="justify">
<img src = "tt.gif" align = "left" height=200 width=300 Hspace = 30 Vspace = 5 alt = “My
picture”>
Knowledge and education are main human riches. We can go on accumulating them forever. Iron
and gold, oil and
diamands will be exhausted one day. Knowledge never will. Though books are burned, what is
written in them is never lost.
</p>
</body>
</html>

24
13. bmuli
bmuli saSualebas gvaZlevs ganvaxorcieloT gadasvla teqstis erTi
fragmentidan meoreze.
magaliTi:
<html>
<head>
<title> Hypertext </title>
</head>
<body>

25
<a href = "h2. html"> About us </a>
<a href = "Tea / Lion.html"> Lion </a>
</body>
</html>
html-Si teqstis erTi fragmentidan meoreSi gadasvla SeiZleba Semdegi
saxiT:
<a href = “[ gadasvlis misamarTi]”> teqstis gamoyofili fragmenti </a>
parametris saxiT [gadasvlis misamarTi] SeiZleba gamoyenebul iqnes
argumentebis ramdenime tipi. yvelaze martivia mivuTiToT sxva HTML
dokumentis saxeli, romelzec unda gadavideT: <A href = “h2.html> About us </A>
Sedegad Cndeba teqsti About us, romelze daWeriTac brauzeris fanjaraSi
CaitvirTeba h2.html dokumenti. miaqcieT yuradReba: Tu gadasvlis misamarTSi
ar aris miTiTebuli Sesabamisi saqaRaldis saxeli, gadasvla ganxorcieldeba
mimdinare saqaRaldis SigniT. SeiZleba bmulis formatireba, magaliTad:
<a href = “h2.html”> <h2> About us </h2> </A>
Tqven SegiZliaT gadasvla dokumentze, romelic mdebareobs nebismier
saqaRaldeSi, dokumentamde sruli gzis miTiTebiT. ase magaliTad, gadasvla
failze Lion.html, romelic moTavsebulia folderSi Tea, xorcieldeba Semdegnairad:
<a href = “Tea /Lion.html”>Lion </a>
zemoT Cven ganvixileT bmulebi mxolod Cvens mier Seqmnil HTML
dokumentze. qvemoT naCvenebia, rogor SeiZleba gadasvla Cvens mier
Seqmnili HTML dokumentidan ukve arsebul web-gverdze.

magaliTi:
<html>
<head>
<title>
New links
</title>
</head>
<body>
<Img src = “medi.gif”>
<br><a href = "http://www.yahoo.com">Yahoo</a>
<br><a href = "http://www.rambler.ru"> Rambler </a>
</body>

26
</html>
gadasvla safosto yuTSi xdeba odnav gansxvavebulad:
<a href = “mailto: tea_todua@yahoo.com”> My E-mail </a>
sxva dokumentze gadasvla SeiZleba ganxorcieldes suraTidanac. principi
iseTivea, rogorc teqstis SemTxvevaSi.
magaliTi:
<html>
<head><title> Links</title></head>
<body>
<h1>Image</h2>
<p><a href = “h2.html”><img src = "picture.gif"></a></p>
</body>
</html>
bmulze mausis mitanisas SesaZlebelia gamoCndes informacia bmulis
Sesaxeb. am funqcias asrulebs atributi title.
magaliTi:
<html>
<head><title> xxxx</title></head>
<body>
<h2> Prompt </h2>
<a href = "index html" title = Prompt>Hypertext </a>
</body>
</html>
zogjer saWiro xdeba bmulis gakeTeba ara sxva dokumentze, aramed imave
dokumentis SigniT. erTi dokumentis SigniT amgvari navigacia xSirad Zalian
moxerxebulia. amis gakeTeba SeiZleba ori xerxiT.
I xerxi - A tegis atribut Name-is daxmarebiT:

magaliTi:
<html>
<head>
<title> Link 1
</title>
</head>
<body>

27
<H2> politics </H2> <Br>
<a href = "#citation 1" > reference on the citation 1</a><Br>
<a href = "#citation 2"> reference on the citation 2</a><Br>
<a href = "#citation 3"> reference on the citation 3</a><Br>
<pre>
Humankind learns a lot from its history, but does it very slowly. So, unfortunately, do most
people discussing politics.
Maybe we should discuss it in a calmer and more important way, influencing the progress
mainly not by speeches,
demonstrations, wars, etc., but just by living and working honestly. That is the way common
people make history.
And Their way is the most important one.
</pre>
<img src="tt.gif" width=200 height=300>
<h3> <a name = "#citation 1"> Citation 1 </a> </h3>
<pre>
“Political ability is the ability to foretall what is going to happen tomorrow, next week, next
month and next year. And to have the ability afterward to explain why it didn’t happen”.
Winston Churchil
</pre>
<img src="tt1.gif" width=200 height=500>
<h3><a name="#citation 2">Citation 2</a></h3>
<pre>
“Since the politician never believes what he says, he is surprised when others believe him.”
Charles de Gaulle
</pre>
<img src="tt2.gif" width=200 height=500>
<h3><a name="#citation 3">Citation 3</a></h3>
<pre>
“Political language – and with variations this is true of all political parties, from conservatives
to anarchists – is designed to make lies sound truthfull. . . “
George Orwell
</pre>
</body>
</html>

28
Tqven SegiZliaT bmuli gaakeToT sxva dokumentebidanac:
<a href=”ancorpri.html#citation1”>reference on the citation 1 from the another document</a>
meore xerxi – atribut id-is daxmarebiT. yvelaferi igive rCeba, mxolod
zemoT moyvanil magaliTSi <h3> tegebTan vwerT:
<h3 id=”#citation 1”>Citation 1</h3>
<h3 id=”#citation 2”>Citation 2</h3>
<h3 id=”#citation 3”>Citation 3</h3>
Tqven SegiZliaT gamoiyenoT nebismieri am ori xerxidan.
arasodes ar miuTiToT amgvarad:
<a href=”#citation1”>Reference on the citation 1</a>
<a name=”CITATION 1”>Citation1</a>
brauzerma Tqvens mier sxvadasxva registrSi dawerili Citation 1 da
CITATION 1 SeiZleba aRiqvas rogorc ori sxvadasxva saxeli, amitom
Secdomebisagan Tavis dazRvevis mizniT saxelebi dawereT erT registrSi.

14. cxrilebi
cxrilebis Seqmnis principi mdgomareobs SemdegSi: web-gverdze iqmneba
cxrili, ujrebis uCinari sazRvrebiT da elementebi, romlebic moiTxoven zust
pozicionirebas, ganlagdebian cxrilis ujrebSi. TiToeuli ujrisTvis Tqven SegiZliaT
miuTiToT formatirebis sakuTari parametrebi. Sesabamisad, formatirebis
brZanebebi moqmedeben mxolod ujris sazRvrebSi. praqtikaSi xSirad
gvWirdeba teqsti ramdenime svetad davyoT. cxrilebi swored amis gakeTebis
saSualebas iZleva. garda amisa, cxrils, romelic erTi ujrisgan Sedgeba, SeuZlia
Zalze efeqturad gamoyos teqstis fragmenti, romelzec mkiTxvelis yuradRebis
mipyrobaa saWiro.
cxrili iwyeba <table> tegiT da mTavrdeba </table>-iT. table-s aqvs ramdenime
atributi:

29
Align - gansazRvravs cxrilis adgilmdebareobas dokumentis velebTan
mimarTebaSi: Align = left (gasworeba marcxena mxridan); align=center
(centrireba). align = right (gasworeba marjvena mxridan).
Width - gansazRvravs cxrilis siganes piqselebSi an procentebSi brauzeris
fanjris siganisgan damokidebulebiT. (mag. width = 400 an width = 80%)
Height - gansazRvravs cxrilis simaRles piqselebSi an procentebSi.
Border- ayenebs cxrilis CarCos sisqes piqselebSi. mag. Border =2. Tu es
atributi ar aris miTiTebuli, maSin cxrili Cndeba CarCos gareSe.
Cellspacing - gansazRvravs ujrebs Soris manZils piqselebSi.
Cellpadding – gansazRvravs manZils piqselebSi ujris CarCosa da ujraSi
moTavsebul elements (teqsti, suraTi) Soris. (mag. Cellpadding = 10)
bgcolor - cxrilis fonis feri
background (Background=eli.jpg) - es atributi gamoiyeneba cxrilis fonad raime
suraTis Casasmelad.
cxrilis TiToeuli striqoni iwyeba tegiT <tr> da mTavrdeba </tr>-iT.
<table>
<tr> <!... I ujris striqonis aRwera></tr>
<tr> <!... IIujris striqonis aRwera></tr>
</table>
yvelaferi, rac Cvens cxrilSi unda gamoCndes, iwereba <td>-sa da </td>-s
Soris; magaliTad, qvemoT moyvanili kodi saSualebas gvaZlevs miviRoT
erTujriani cxrili:
<Html>
<head><title>Table</title></head>
<table border=1>
<tr>
<td>ერთუჯრიანი ცხრილი</td>
</tr>
</table>
</body>
</html>
samujriani erTstriqoniani cxrilis misaRebad unda davweroT:
<html>
<head><title>Table</title></head>
<table border=1>

30
<tr>
<td>პირველი უჯრა</td>
<td>მეორე უჯრა</td>
<td>მესამე უჯრა</td>
</tr>
</table>
</body>
</html>
SevqmnaT sami striqonisa da oTxi svetisagan Semdgari cxrili:
<html>
<head><title>Table</title></head>
<table border=1>
<tr>
<td>September</td>
<td>Octomber</td>
<td>November</td>
<td>December</td>
</tr>
<tr>
<td>January</td>
<td>February</td>
<td>March</td>
<td>April</td>
</tr>
<tr>
<td>May</td>
<td>June</td>
<td>July</td>
<td>August</td>
</tr>
</table
</body>
</html>

September Octomber November December

31
January February March April
May June July August

tr-s SeiZleba hqondes ramdenime atributi:


Align = left ujraSi asworebs teqsts marcxena mxridan; align = center
(centrireba), align = right (teqstis gasworeba marjvena mxridan).
Valign - miuTiTebs teqstis vertikalur mdebareobaze.
valign = top (teqsts uaxloebs ujris zeda nawils)
valign = middle (teqsti ujris SuaSi, centrSi)
valign = Bottom (teqsti ujris qveda kideSi)
bgcolor - ayenebs cxrilis fers, mocemuli striqonisaTvis.
<td>-s aqvs Semdegi atributebi:
colspan - SeiZleba ujris sididis gazrda horizontalurad.
mag: colspan = 3 niSnavs, rom ujris svetis sigane 3-jer gaizarda.
Rowspan - Rowspan =2 niSnavs, rom ujra ikavebs or striqons.
Align - ujraSi teqstis ganlagebas cvlis. dasaSvebi mniSvnelobebia:
Align = left; Align=right; Align=center.
valign - miuTiTebs teqstis vertikalur mdebareobaze
valign = top (teqsti miaxloebulia ujris zeda kidesTan);
valign = middle (teqstis centrSi dayeneba)
valign = bottom (teqsti ujris qveda kideSia)
Width - ujris sigane piqselebSi (mag: width = 200)
Height - ujris simaRle piqselebSi
bgcolor - ayenebs cxrilis fers miTiTebuli ujrisaTvis.
ufro dawvrilebiT ganvixiloT Colspan da Rowspan atributebi.
magaliTi:
<html>
<head><title>Table</title></head>
<body>
<table border=”1” align=”center”>
<tr align=”center”>
<td width=”300” colspan=”3”>1.1</td>
</tr>
<tr align=”center”>
<td>2.1</td>

32
<td>2.2</td>
<td>2.3</td>
</tr>
<tr align=”center”>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</body>
</html>
miiReba cxrili, romlisTvisac miTiTebulia atributi colspan=3, ris Sedegadac
cxrilis pirveli striqoni moicavs sam svets:

1.1
2.1 2.2 2.3
3.1 3.2 3.3

qvemoT mocemuli cxrilis misaRebad kodi unda daiweros ase:


<html>
<head><title>Table</title></head>
<body>
<table border="1" align="center">
<tr align="center">
<td width="100" Rowspan="2">1.1</td>
<td width="100">1.2</td>
<td width="100">1.3</td>
<td width="100">1.4</td>
</tr>
<tr align="center">
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
</body>

33
</html>

1.2 1.3 1.4


1.1
2.1 2.2 2.3

cxrils SeiZleba hqondes saTauri, es ar aris aucilebeli elementi. cxrilis


saTauri Tavsdeba <caption> da </caption> tegebs Soris. Caption-s SeiZleba hqondes
atributi align: <caption align=top> (saTauri cxrilis zemoT) da <Caption align=bottom>
(saTauri Tavsdeba cxrilis qvemoT). cxrilis SigniT saTauris miTiTeba xdeba
<th>. . .</th> tegebis saSualebiT. igi td tegisgan gansxvavdeba mxolod imiT, rom
teqsti ufro msxvili SriftiT gamohyavs.
SevqmnaT ufro rTuli cxrili:
ცხრილის სათაური
ცხრილის ქვესათაური
1.1 1.1
1.1 1.1
რთული ცხრილი რთული ცხრილი
1.1 1.1
1.1 1.1
ეს ცხრილის ბოლო სტრიქონია

aseTi cxrilis misaRebad unda daiweros:


<html>
<head><title>Table</title></head>
<body>
<table border="1" align="center" width="400">
<caption align="top"><b>ცხრილის სათაური</b></caption>
<tr align="center">
<th colspan="4">ცხრილის ქვესათაური</th>
</tr>
<tr align="center">
<td Rowspan="4">რთული ცხრილი</td>
<td>1.1</td>
<td>1.1</td>
<td Rowspan="4">რთული ცხრილი</td>
</tr>
<tr align="center">
<td>1.1</td>
<td>1.1</td>
34
</tr>
<tr align="center">
<td>1.1</td>
<td>1.1</td>
</tr>
<tr align="center">
<td>1.1</td>
<td>1.1</td>
</tr>
<tr align="center">
<td colspan="4">ეს ცხრილის ბოლო სტრიქონია</td>
</tr>
</table>
</body>
</html>
15. cxrilebis magaliTebi
magaliTi I. 3 striqonisa da 4 svetisgan Semdgari cxrili:
<html>
<head><title>Tables</title></head>
<body>
<table>
<tr> <th> one </th> <th> two </th> <th> three </th><th> four </th> </tr>
<tr> <td> 1.1 </td> <td>1.2 </td> <td> 1.3</td> <td> 1.4 </td> </tr>
<tr> <td> 2.1 </td> <td> 2.2 </td> <td> 2.3</td> <td> 2.4 </td> </tr>
</table>
</body>
</html>
Sedegad brauzeris fanjaraSi miiReba:
One two three four
1.1 1.2 1.3 1.4
2.1 2.2 2.3 2.4
magaliTi II.
<html>
<head>
<title> table2 </title>

35
</head>
<body>
<H1> უმარტივესი ცხრილი </H1>
<table border = 1> <!-- ცხრილის დასაწყისი -->
<Caption> <!-- ცხრილის სათაური -- >
ცხრილი
</Caption>
<tr> <!-- I სტრიქონის დასაწყისი -- >
<td> <!-- I უჯრის დასაწყისი -- >
პირველი სტრიქონი, პირველი სვეტი
</td> <!-- I უჯრის დასასრული -- >
<td> <!-- II უჯრის დასაწყისი -- >
პირველი სტრიქონი, მეორე სვეტი
</td> <!-- II უჯრის დასასრული -- >
</tr> <!... I სტრიქონის დასასრული-- >
<tr> <!-- II სტრიქონის დასაწყისი -- >
<td>
მეორე სტრიქონი, პირველი სვეტი
</td>
<td>
მეორე სტრიქონი, მეორე სვეტი
</td>
</tr>
</table>
</body>
</html>
Sedegad brauzeris fanjaraSi miiReba:

umartivesi cxrili

cxrili
pirveli striqoni, pirveli sveti pirveli striqoni, meore sveti
meore striqoni, meore sveti meore striqoni, pirveli sveti

magaliTi III. : <Html>

36
<head>
<title> table3</title></head>
<body> <font face = "Sylfaen">
<table border =10 width = 400 align = center bordercolor=red>
<tr>
<td> ამ ცხრილისთვის მითითებულია პარამეტრი Border=10 </td>
</tr>
</table>
</font>
</body>
</html>
magaliTi IV:
<html>
<head>
<title> table4</title>
</head>
<body>
<font face = “Sylfaen”>
<table border = 5 cellspacing = 0 width = 400 align = center Bgcolor = "cyan">
<tr align = center>
<td width = 10%> უჯრის სიგანე მთლიანად ცხრილის 10%-ს შეადგენს</td>
<td width = 60% > უჯრის სიგანე მთლიანად ცხრილის 60%-ია</td>
<td width = 30%> უჯრის სიგანე მთლიანად ცხრილის 30%-ია</td>
</tr>
<tr>
<td align = center colspan = 3> ამ უჯრისთვის მიეთითა პარამეტრი colspan = 3
</td>
</tr>
</table>
</font>
</body>
</html>
magaliTi V:
<html>
<head>

37
<title> table5 </title></head>
<body>
<font face = "Sylfaen">
<table border = 5 cellspacing = 0 width = 400 Align = center Bgcolor = "cyan">
<tr align = center>
<td width = 30% Rowspan = 2 Bgcolor = "00FF00">
ამ უჯრისთვის მითითებულია Rowspan = 2 და width = 30% </td>
<td> ამ უჯრის სიგანე არ არის მითითებული, ამიტომ ის იკავებს
დარჩენილ ნაწილს, ე.ი. 70%-ს</td>
</tr>
<tr align = center>
<td> ეს უჯრა კი წარმოქმნილია იმ უჯრის სიგანისგან დამოკიდებულებით,
რომელიც მის ზემოთ მდებარეობს </td>
</tr>
</table>
</font>
</body>
</html>

magaliTi VI:
<html>
<head>
<title>table6 </title>
</head>
<body>
<table>
<tr>
<td height = "35" bgcolor ="#FFCC33" colspan = "2">
<center> 1×1 </center> </td>
<td width = "50" bgcolor = "#336699" rowspan = "2">
<center> 1×2 </center> </td>
</tr>
<tr>
<td height = "35" width = "50" bgcolor = "#336699">
<center> 2×1 </center> </td>

38
<td width = "50" bgcolor = "#FFCC33"> <center> 2×2</center > </td>
</tr>
</table>
</body>
</html>

1×1
1×2
2×1 2×2

magaliTi VII:
<html>
<head>
<title> table7 </title>
</head>
<body>
<table border = "0" cellspacing = "0" height = "100% " width = "100%">
<td bgcolor = "#FFFF80" align = "center"> <small>
<strong> <p align = "center"> <font face = "Arial">
<a href = "index 1. html"> Main </a> </font> </strong></small> </td></tr>
<tr>
<td bgcolor = "#66FFCC" align = "center"><small> <strong>
<p align = "center"> <font face = "Arial">
<a href = "rg. html"> Registration </a> </font> </strong>
</small> </td></tr>
<tr>
<td align = "center" bgcolor = "#FFFF80"> <small><strong>
<p align = "center"> <a href = "tsr. html"> <font face = "Arial">
<a href = "rv. html"> Links </a> </font> </strong> </small>
</td></tr>
<tr>
<td bgcolor = "#66FFCC" align = "center"> <small> <strong>
<p align = "center"> <font face = "Arial">
<a href = "r. html"> Forum </a> </font> </strong> </small></td></tr>
</table>

39
</body>
</html>

magaliTi VIII:
qvemoT ganxilulia cxrilis monacemebis vertikaluri mdebareobis sakiTxi. cxrilis
monacemebis vertikalur mdebareobas gansazRvravs atributi
valign = “middle” (“top”, “buttom”). konkretuli ujris monacemi moTavsebuli iqneba
ujris SuaSi, zemoT an qvemoT. kodi da misi Sesabamisi Sedegi, naCvenebia
qvemoT.

<html>
<head> <title> table8 </title> </head>
<body>
<table>
<tr>
<td height = "35" width = "50" bgcolor = "#FFCC33" valign = "top"> <center> 1×1
</center> </td>
<td width = "50" bgcolor = "#336699"> <center> 1×2 </center> </td>
<td width = "50" bgcolor = "FFCC33" valign = "bottom"> <center> 1×3</center>
</td></tr>
<tr>
<td height = "35" width = "50" bgcolor = "#336699" valign = "bottom">
<center> 2×1 </center> </td>
<td width = "50" bgcolor = "FFCC33"> <center> 2×2 </center> </td>
<td width = "50" bgcolor = "#336699" valign = "top"> <center> 2×3 </center> </td>
</tr>
</table>
</body>
</html>

1×1 1×2 1×3


2×2 2×3
2×1

magaliTi IX:

40
<html>
<head> <title> table9 </title> </head>
<body>
<table border = "3" bordercolor = blue bgcolor = red>
<tr> <td> 1-one </td> <td> 2-two </td> <td> 3-three </td> </tr>
<tr> <td> 4-four </td> <td> 5-five </td> <td> 6-six </td> </tr>
<tr> <td> 7-seven</td> <td> 8-eight </td> <td> 9-nine </td> </tr> </table>
Changing the entire tables color
<hr>
<table border><tr bordercolor = yellow bgcolor =green>
<td> 1-one </td><td> 2-two </td> <td> 3-three </td> </tr>
<tr> <td> 4-four </td> <td> 5-five </td> <td> 6-six </td> </tr>
<tr> <td> 7-seven</td> <td> 8-eight </td> <td> 9-nine </td> </tr> </table>
Changing a single rows color
<hr>
<table border> <tr><td bordercolor = red bgcolor = yellow> 1-one </td>
<td> 2-two </td> <td> 3-three </td> </tr>
<tr> <td> 4-four </td> <td> 5-five </td> <td> 6-six </td> </tr>
<tr> <td> 7-seven</td> <td> 8-eight </td> <td> 9-nine </td> </tr> </table>
Changing a single cells color
</body>
</html>

magaliTi X: qvemoT ganxilul magaliTSi, cxrili gamoyenebulia teqstis


gansaTavseblad gamosaxulebis gaswvriv.
<html>
<head><title> table borders </title></head>
<body>
<table>
<tr><td> <img src = "georgia. gif"> </td>
<td>
<p align="justify">
Two Georgian Kingdoms of late antiquity, Iberia, in the east of the country and Colchis in the west,
were among the first nations in the region to adopt Christianity (317 AD and 523 AD,
respectively). Egrisi often saw battles between rivals Persia and the Byzantine Empire, both of

41
which managed to conquer Western Georgia from time to time. As a result, those Kingdoms were
disintegrated into various feudal regions in the early Middle Ages. This made it easy for Arabs to
conquer Georgia in the 7th century. The rebellious regions were liberated and united into the
Georgian Kingdom at the beginning of the 11th Ccentury. Starting in the 12th century the rule of
Georgia extended over the significant part of Southern Caucasus, including northeastern parts and
almost entire northern coast of what is now Turkay.</p>
</td></tr>
</table>
</body>
</html>

magaliTi XI: am magaliTis saSualebiT SeZlebT cxrilebTan dakavSirebuli


codnis ganzogadebas:
<html>
<head>
<title> Page with tables </title>
</head>

42
<body bgcolor = "#FFFFFF" text = "#000000">
<table cellspacing = "5">
<tr>
<td height = "35" bgcolor = "#FFCC33" colspan = "2"> <center> 1×1 </center> </td>
<td width = "50" bgcolor = "#336699" rowspan = "2"> <center> 1×2 </center> </td>
</tr>
<tr>
<td height = "35" width = "50" bgcolor = "#336699"> <center> 2×1 </center> </td>
<td width = "50" bgcolor = "#FFCC33"> <center> 2×2 </center> </td>
</tr>
</table>
</body>
</html>
Sedegad miiReba DaseTi suraTi:

1×1
1×2
2×1 2×2

cxrilis ujraSi (ujra 1X1) SevitanoT teqsti:


<html>
<head><title> Page with tables </title>
</head>
<body bgcolor = "#FFFFFF" text ="#000000">
<center>
<table cellspacing = "5" width = "700">
<tr>
<td width = "400" bgcolor = "#FFCC33" colspan = "2">
<div align = "left">
Celebration of the New Year is one of the oldest traditions. For Europe the 1st January as the
New Year Day was introduced by Julius Caesar.
Janus was the Roman god of beginnings and endings, openings and closings. 600 years later
church proclaimed Annunciation (the 25th of March) as the New Year Day but at the end of
the 16th century the 1st of January again was declared by church as the New Year Day.
</div>
</td>

43
<td width = "300" bgcolor = "#336699" rowspan = "2" ><center> 1×2 </center> </td>
</tr>
<tr>
<td bgcolor = "#336699"> <center> 2×1 </center> </td>
<td bgcolor = "#FFCC33"><center> 2×2 </center> </td>
</tr>
</table>
</center>
</body>
</html>
teqsti gavasworeT marcxena mxridan DIV tegis daxmarebiT, cxrili
moTavsda ekranis SuaSi teg <center>-is saSualebiT. Tu Tqven zemoT moyvanili
kodis realizebiT miRebul Sedegs SexedavT brauzeris fanjaraSi, SeniSnavT rom
teqsti sakmaod axlosaa ujris kideebTan da gamoiyureba uSnod. amis
gamosworeba SesaZlebelia, cellpadding atributis daxmarebiT.
<html>
<head>
<title> Page with tables </title>
</head>
<body bgcolor = "#FFFFFF" text ="#000000">
<center>
<table cellspacing = "5"
width = "700" cellpadding="20">
<tr>
<td width = "400" bgcolor = "#FFCC33"
colspan = "2" valign="top">
<div align = "left">
<h3>Welcome on my page!</h3>
Celebration of the New Year is one of the oldest traditions. For Europe the 1st January as the
New Year Day was introduced by Julius Caesar.
Janus was the Roman god of beginnings and endings, openings and closings. 600 years later
church proclaimed Annunciation (the 25th of March) as the New Year Day but at the end of the
16th century the 1st of January again was declared by church as the New Year Day.
</div>
</td>

44
<td width = "300" bgcolor = "#336699"
rowspan = "2" valign="top">
<div align="center">
<img src="Newtree.jpg" alt="tree"><br><br>
<img src="year1.jpg" alt="New year"></div> </td>
</tr>
<tr>
<td bgcolor = "#336699">
<center> 2×1 </center>
</td>
<td bgcolor = "#FFCC33">
<center> 2×2 </center>
</td>
</tr>
</table>
</center>
</body>
</html>
garda cellpadding atributisa, aq daemata <h3> tegi da monacemebi meore
svetisaTvis. atribut valign-is daxmarebiT teqsti da suraTi moTavsda ujris zeda
nawilSi.

45
SevitanoT monacemebi darCenili ori ujrisaTvis:
<td bgcolor = "#336699"> <div align="center"><a href="mailto:"tea_todua@yahoo.com">Send
mail to Tea</a></div> </td>
<td bgcolor = "#FFCC33"><div align="center"><a href="mailto:"lasha@gtu.ge">Send mail to
Lasha</a></div></td>
miRebuli cxrili ekranze gamoiyureba Semdegnairad:

46
16. specialuri simboloebi

specialuri simboloebi html dokumentSi SeiZleba Setanil iqnes &-s


(ampersandi) meSveobiT

47
simbolo kodi magaliTi
saavtoro uflebis niSani &copy; copyright@2002gn.ge
daregistrirebuli marka &reg; Mgt Co®
savaWro marka &#8482; Wepfarer™
naklebia &lt; <
metia &gt; >
ampersandi &amp; &
sityvis Suaze argamxleCi &nbsp;
probeli
tire &#821; -
brWyalebi &quot; “
gradusi &deg; °
plius-minusi &plusmn; ±
tabulaciis niSani &para; ¶
xarisxi &sup2; 2

yvelafers, rac moTavsebulia < > -s Soris, brauzeri aRiqvams rogorc tegs.
amitom >-s Sesatanad teqstSi moifiqres niSani &gt. davuSvaT, Tqven
gWirdebaT miyolebiT xuTi probelis Casma teqstSi. swored am SemTxvevaSi
mosaxerxebelia probelis specialuri simbolos gamoyeneba. is SeiZleba daiweros
Tundac aTasjer. Cveulebriv probelis ignorireba xdeba brauzeris mier, Tu is
erTze metia sityvebs an tegebs Soris.

17. sazRvrebi brauzeris fanjaraSi

html-is Seswavlisas aucileblad unda aRiniSnos, rom arsebobs tegi da


atributi, romelsac yvela brauzeri ver aRiqvams. qvemoT visaubrebT teg body-s
atributebze (topmargin, leftmargin):
topmargin - gansazRvravs dokumentis zeda mindvris sigrZes
(daSorebas zeda kidesTan)
leftmargin- dokumentis marcxena mindvris siganes (daSorebas
marcxena kidesTan)

48
am mindvrebis gasauqmeblad parametrebs leftmargin da topmargin-s mivaniWoT
nulis toli mniSvneloba:
<body text = “#000000” bgcolor = “ffffff” topmargin = “0” leftmargin =”0”>
leftmargin da topmargin atributebs aRiqvams mxolod Internet Explorer (IE).
Netspace Navigator (NN)-saTvis arsebobs sxva atributebi - marginheight da marginwidth .
marginheight - topmargin-is analogiuria. marginwidth ki leftmargin-is analogiuri.
imisaTvis rom daSoreba zeda da marcxena kidesTan iyos nuli, kodi unda
daiweros Semdegnairad:
<body text = "#000000" bgcolor = "ffffff" topmargin = "0" leftmargin = "0" manginwidth = "0"
manginheight = "0">
aseT SemTxvevaSi yvelaferi kargad iqneba IE-s, NN-isa da sxva bevri
brauzerisTvisac.
leftmargin da topmargin dokumentis mxolod zeda da marcxena mxridan
daSorebas gansazRvraven. imisaTvis, rom movaciloT marjvena da qveda
mindvrebi, arsebobs atributebi rightmargin da bottommargin:
<body text = “000000” bgcolor = “ffffff” rightmargin = “0” bottommargin = “0”
topmargin = “0” leftmargin = “0” manginwidth = “0” manginheight = “0>

18. morbenali striqoni


teg Marquee-s romlis saSualebiTac iqmneba morbenali striqoni, aRiqvams
mxolod IE:
<marquee height = "10" width = "270" bgcolor = "#99CCFF">
მორბენალი სტრიქონი
</marquee>
rogorc xedavT, yvelaferi martivia. teqsti, romelic moTavsdeba ტegebs <marquee>
</marquee>-s Soris, xdeba morbenali striqoni.
teg marquee-s yvela atributi TqvenTvis ukve cnobilia. bgcolor - morbenali
striqonis fonis feri, height - striqonis simaRle, width - striqonis sigane.

49
morbenali striqonisTvis SeiZleba miuTiToT TqvenTvis cnobili sxva
atributebic: hspace, vspace da align.
<marquee height = "10" width = "270" loop = "2"> მორბენალი სტრიქონი
</marquee>
atributi loop gansazRvravs morbenali striqonis ekranze gavlis raodenobas.
zemoT aRweril SemTxvevaSi, morbenali striqoni ekranze gairbens mxolod orjer.
atributi direction gansazRvravs morbenali striqonis moZraobis mimarTulebas
- direction = “left” (right, up, down) - moZraoba marcxniv (marjvniv, zemoT,
qvemoT).
behavior – striqonis moZraobis saxes gansazRvravs. behavior = “scroll” (slide,
alternate). Scroll - dayenebulia avtomaturad, SegiZliaT arc miuTiToT. slide - striqoni
mirbis kidemde da Cerdeba. Alternate - striqoni imoZravebs kididan kidemde.
Scrollamount - striqonis moZraobis siCqare, SeiZleba miiRos mniSvneloba 1-idan
10-mde: 1 - yvelaze neli moZraobaa, 10 - yvelaze swrafi.

19. freimebi
freimebi brauzeris fanjaras calkeul damoukidebel panelebad yofen,

romelTagan TiToeuls Tavisi faili gamohyavs ekranze. sxva sityvebiT, TiToeuli


aseTi paneli “mini brauzers” warmoadgens.
magaliTi:
<html>
<head>
<title> Creating Frames </title>
</head>
<frameset rows = "100, *, 150">
<frame src = "logo.html">
<frame src = "content.html">
<frame src = "menu.html">

50
</frameset>
</html>
brauzeris fanjara iyofa sam horizontalur freimad:
logo.html

content.html

menu.html

winaswar ar dagaviwydeT SeqmnaT Cveulebrivi html dokumentebi


logotipiT, meniuTi da ZiriTadi teqstiT (logo.html, content.html, menu.html). atribut rows
meSveobiT, mivuTiTeT TiToeuli freimis simaRle (rows = “100, *, 150”). pirveli
freimis simaRle - 100 piqselia, mesamis - 150, meore ikavebs darCenil nawils.
(es mieTiTa * niSnis meSveobiT).
tegi Frame miuTiTebs, rom pirvel freimSi CaitvirTeba logo.html dokumenti,
meoreSi iqneba moTavsebuli Content.html, mesameSi - menu.html. Tu Tqven
gnebavT, rom menu.html iyos meore rigSi, maSin menu.html-ma unda gaucvalos
adgili Content.html-s. cvlileba gakeTdes ise, rom menu.html-ma kvlav 150 piqseli
daikavos simaRleSi.

magaliTi:
<html>
<head>
<title> Creating Frames </title>
</head>
<frameset rows = "100, 150, *">
<frame src = "logo.html">
<frame src = "menu.html">
<frame src = "content.html">
</frameset>
</html>

20. konteineri Frameset

51
freimi moTavsebuli unda iyos konteiner frameset-Si, romelic CvenTvis ukve
nacnobi konteiner body-s adgils ikavebs. Html dokumenti romelsac gaaCnia
struqtura Frameset, ar Seicavs body-s da piriqiT. Tuki body-s CavrTavT
dokumentSi, sadac gamoiyeneba konteineri Frameset da Frame, freimebi
ignorirebuli iqnebian brauzeris mier da maTi informacia ar aisaxeba ekranze.
gamoCndeba mxolod is informacia, romelsac Seicavs body.
iyaviT yuradRebiT da ar gamoiyenoT struqturebi body da Frameset erT
dokumentSi. teg Frameset-is SigniT SeiZleba moTavsebuli iyos mxolod tegi
<Frame> an kidev TviT tegi <Frameset>.

21. freimebis parametrebis gansazRvra


teg <Frameset>-s aqvs ori ZiriTadi atributi: Rows da cols. maTi saSualebiT
xdeba striqonebisa (rigebis) da svetebis raodenobis miTiTeba. Tuki Tqven erT
striqonze an svetze meti ar gansazRvreT, maSin brauzeri ignorirebas ukeTebs
konteiner <Frameset>-s da ekrani carieli rCeba. sxva sityvebiT, freimi ar
SeiZleba iyos erTaderTi.
<Frameset rows = “100, 240, 140”>
miuTiTebs, rom gvaqvs sami horizontaluri freimi, romelTa simaRle 100, 240 da
140 piqselia Sesabamisad. Tumca striqonebis sididis miTiTeba piqselebSi ar
aris rekomendebuli, radgan am dros mxedvelobaSi ar miiReba is faqti, rom
brauzeris fanjrebi SeiZleba sul sxvadasxva zomisani iyvnen. umjobesia
visargebloT fardobiTi sidideebiT. magaliTad: Frameset Rows = “25%,50%,25%” rac
qmnis sam freims 25%,50%,25% simaRliT, brauzeris fanjrisagan
damokidebulebiT.
freimebis parametrebi fardobiT erTeulebSi SeiZleba mivuTiToT Semdegi
saxiTac: <Frameset cols = “*, 2*, 3*”>, sadac simbolo * aRniSnavs brauzeris fanjris
proporciul dayofas. amgvarad, fanjara iyofa sam vertikalur freimad (sam
svetad), pirvelis siganea brauzeris fanjris 1/6, meoris 2/6 (anu 1/3) da mesamis
3/6 (anu 1/2). erTianis miTiTeba fardobiTi mniSvnelobebis dros aucilebeli ar
aris.
Rows da Cols atributebi SeiZleba Sereuli saxiTac mieTiTos, magaliTad:
<Frameset cols = “100,25%,*,2*”>. aq pirvel freims eniWeba absoluturi
mniSvneloba – 100 piqseli, meores 25% fanjris zomisagan damokidebulebiT.
danarCeni sivrce iyofa mesame da meoTxe freims Soris proporciiT 1/3 da 2/3.

52
pirvel rigSi gamoiyofa adgili im freimisTvis, romlisTvisac absoluturi
mniSvnelobaa miTiTebuli. Semdeg freimisTvis, romlis mniSvnelobac
procentebSia miTiTebuli, bolos ki freimisTvis – fardobiTi mniSvnelobiT.
Tu Tqven iyenebT absolutur sidideebs Rows da Cols-is miTiTebisas, nu
gaakeTebT aseT freims dids. isini xom nebismieri zomis brauzeris fanjaraSi
unda Caetion. amitom garkveuli balansirebis gakeTebis mizniT rekomendebulia
Tundac erTi iseTi freimis miTiTeba, romelic gansazRvrulia procentebSi an
fardobiT erTeulebSi.
orive atributis gansazRvrisas, magaliTad: <Frameset Rows = “*,2*,*” Cols =
“2*,*”> miiReba sami striqoni (rigi) da ori sveti. pirveli da bolo striqonebi
ikaveben fanjris simaRlis 1/4-s, Sua 1/2-s. pirveli sveti brauzeris fanjris siganis
2/3-s, xolo meore 1/3-s ikavebs.

22. tegi <Frame>


tegi <Frame> gansazRvravs calkeul freims. is unda ganTavsdes konteiner
<Frameset>-is SigniT:
<Frameset Rows = “*,2*”>
<Frame>
<Frame>
</Frameset>
avRniSnavT, rom es tegi ar warmoadgens konteiners da </Frameset>-isgan
gansxvavebiT ar gaaCnia daxurvis tegi. <Frame> tegebis ricxvi unda iyos toli
freimebis im raodenobisa, romelic gansazRvrulia teg <Frameset>-iT.
Cvens magaliTSi ori freimia gansazRvruli, amitomac konteineri Seicavs
<Frame> tegebis Sesabamis raodenobas. jerjerobiT Cvens freimebSi aranairi
informacia ar weria.
Html-Si teg Frame-s gaaCnia eqvsi atributi: SRC, NAME, MARGINWIDTH,
MARGINHEIGHT, SCROLLING da NORESIZE. am atributebis gamoyenebis sintaqsi
aseTia: <Frameset src = “url” Name = “window_name”, scrolling = Yes/No/Auto, Marginwidth
= “value”, Marginheight = “value” NORESIZE >

53
freimSi moTavsebuli informaciis miTiTeba xorcieldeba atribut SRC-s
gamoyenebiT: <Frame src = “sample.html”>. sample.html - srulfasovani Html
dokumentia, Seicavs yvela aucilebel Semadgenel nawils (konteinerebi: Html,
Head, Body da a.S.) da mdebareobs imave saqaRaldeSi, romelSic dokumenti,
romelic Seicavs konteiner Frameset-s. Sample.html-s SeiZleba hqondes Semdegi
saxe:
<Html>
<head>
<title>
</head>
<body>
This is some sample text
</body>
</html>
Tu Tqven gnebavT Tqvens freimSi moaTavsoT gamosaxuleba GIF formatSi,
dokumentis kodSi SegiZliaT CarToT aseTi striqoni:
<Frame src = “world.gif”>
im SemTxvevaSi, rodesac brauzeri ver poulobs miTiTebul fails, freimi ar aigeba
da brauzeri gamoitans Setyobinebas Secdomis Sesaxeb. Tu tegSi Frame ar aris
miTiTebuli atributi Src, freimi nebismier SemTxvevaSi Seiqmneba, mxolod is
iqneba carieli.
teqsti, saTauri, grafika da sxva elementebi ar SeiZleba pirdapir iqnen
CarTuli dokumentSi, romelic Seicavs freimebs. isini mxolod elementis URL
misamarTis daxmarebiT unda iyvnen CarTuli dokumentSi. Tuki konteineri
Frameset Seicavs “ucxo sxeuls”, is ugulebelyofili iqneba, freimebi ignorirebulni
iqnebian.

23. freimebis gamoyenebis ramdenime


martivi magaliTi
freimebis minimaluri SesaZlo raodenoba SeiZleba iyos 2-is toli.
magaliTi:
<Html>
<head></head>

54
<Frameset cols = *, 2*>
<Frame src = “label.html”>
<Frame src = “info.html”>
</Frameset>
</html>
ganxilul magaliTSi freimebi brauzeris fanjaras or vertikalur nawilad yofen.
marcxena nawili ikavebs fanjris 1/3-s, marjvena nawili ki - 2/3-s. pirveli freimi
Seicavs dokuments label.html-s, meore ki - info.html-s. aseTi saxiT advilad
SeiZleba Seiqmnas aTi an meti vertikaluri (an horizontaluri, atribut Row-s
gamoyenebiT) freimi. Tumca, rogorc wesi, gverdze ar unda iyos erTdroulad
sam-oTx freimze meti.
Tu gnebavT gverdze gqondeT erTdroulad oTxi an oTxze meti horizontaluri
an vertikaluri freimi, umjobesia cxrilebis gamoyeneba.
ganvixiloT html dokumenti, romlis Sedegadac brauzeris fanjaraSi dokumenti
ganlagdeba Semdegnairad:

logo.html
menu. Content.html
html

fanjara iyofa or rigad (striqonad). pirvel rigSi moTavsdeba logo.html


dokumenti, meore rigi iyofa or svetad, romlebSic moTavsdebian dokumentebi
menu.html da content.html.
magaliTi:
<html>
<head><title> Creating Frames </title></head>
<frameset rows = "100,*">
<frame src = "logo.html">
<frameset cols = "150,*">
<frame src = "menu.html">
<frame src = "content.html">
</frameset>
</html>
axla ganvixiloT meore suraTze gamosaxuli varianti:

logo.html

55
menu.html content.html

am SemTxvevaSi fanjara iyofa svetebad. meore sveti Seicavs dokuments


content.html, pirveli sveti ki dayofilia or rigad da masSi moTavsebulia
dokumentebi logo.html da menu.html.
Sesabamisi kodi mocemulia qvemoT:
<html>
<head>
<title> Creating Frames </title>
</head>
<frameset cols = "100, *">
<frameset rows = "100, *">
<frame src = "logo.html">
<frame src = "menu.html">
</frameset>
<frame src = "content.html">
</frameset>
</html>
magaliTi:
<html>
<head><title></title></head>
<Frameset Rows = "*,2*" Cols = "25%, 35%, 40%">
<Frame src = "labela.html">
<Frame src = "labelb.html">
<Frame src = "labelc.html">
<Frame src = "infoa.html">
<Frame src = "infob.html">
<Frame src = "infoc.html">
</frameset>
</html>
miiReba Semdegi suraTi:

56
freimebis ufro rTuli kombinaciis magaliTi:
<Html>
<head></head>
<Frameset Rows = "25%, 50%, 25%">
<Frame src = "header.html">
<Frameset cols = "25%, 75%">
<Frame src = "label.html">
<Frame src ="info.html">
</Frameset>
<Frame src = "footer.html">
</Frameset>
</html>
am dokumentSi erTi freimi Cadgmulia meoreSi, gareTa konteineri Frameset
gansazRvravs sam horizontalurad ganlagebul freims, romlebic ikaveben
fanjaras mTel mis siganeze, maTi vertikaluri ganzomileba ki Sesabamisad 25%,
50% da 25%-ia: <Frameset Rows = “25%, 50%, 25%”>

57
header.html 25% marcxena freimi label.html ikavebs brauzeris

label info.html fanjris 25%s, info.html ki 75%-s.

25% 75% 50%


footer.html 25%

24. freimebis garegnuli saxis modifikacia


atributebi Marginwidth da Marginheight freimis Sida sazRvrebis kontrolirebis
saSualebas iZlevian.
atributebis mniSvnelobebi moicema yovelTvis piqselebSi, magaliTad:
<Frame marginwidth = “5” marginheight = “7”>
iqmneba freimis SigniTa CarCo zeda da qveda sazRvarze siganiT 5 piqseli,
marcxena da marjvena sazRvarze siganiT 7 piqseli. am CarCos SigniT
monacemebi ar iqnebian moTavsebuli. teg <Frame>-s gaaCnia atributi
SCROLLING.
<Frame scrolling = “YES/NO/AUTO”>

58
am atributma SeiZleba miiRos erT-erTi sami mniSvnelobidan: YES, NO an AUTO.
es ukanaskneli avtomaturad yendeba saWiroebis SemTxvevaSi. Tu miTiTebulia
yes, maSin mcocavi zoli gamoCndeba yvela SemTxvevaSi, no krZalavs mis
gamoCenas.
freimis zomebi advilad SeiZleba Seicvalos momxmareblis mier. arsebobs
specialuri parametri, romelic Tqvens mier Seqmnili gverdis damTvalierebels
saSualebas ar miscems Secvalos freimebis zomebi. vebmasterebi iyeneben
atribut NORESIZE-s.
magaliTi:
<html>
<head>
<title> Creating frames </title></head>
<frameset rows = "100, *">
<frame src = "logo.html" scrolling = "no" noresize>
<frame src = "menu.html" noresize>
</frameset>
</html>
freimebis sazRvrebis warmosadgenad html-Si arsebobs sami atributi:
BORDER, FRAMEBORDER da BORDERCOLOR. pirveli maTgani am atributebidan
gamoiyeneba mxolod tegTan <Frameset> da ayenebs yvela sazRvris sisqis
zomas piqselebSi yvela freimisTvis.
<Frameset Border = “5”>
Tu es atributi 0-is tolia, maSin yvela freimi iqneba xiluli CarCos (sazRvris)
gareSe. qvemoT ganxilul magaliTs davarqvaT saxeli, vTqvaT, Ali.html
<html>
<head>
<title> Creating frames </title>
</head>
<frameset cols = "100, *", border = "0">
<frameset rows = "100, *">
<frame src = "logo.html" scrolling = "no" >
<frame src = "menu.html">
</frameset>
<frame src = "content.html">
</frameset>

59
</html>
atribut Border-is mniSvneloba avtomaturad 5-is tolia. atributi Frameborder
gamoiyeneba tegebTan <Frameset> da <Frame> da iRebs or mniSvnelobas: yes
an no. roca Frameborder = 0, freimebs Soris sazRvari ar Cans.
atributi Bordercolor SeiZleba gamoviyenoT tegebTan <Frameset> da <Frame>.
magaliTi:
<html>
<head>
<title> Creating frames </title></head>
<Frameset bordercolor = "red" Rows = " *, *">
<Frame src = "info.html" >
<Frame src = "info1.html">
</Frameset>
</html>
25. freimis saxelis gansazRvra
freimis saxelis gansazRvra xdeba Name-is saSualebiT. magaliTad, striqoni
<Frame src = “info.html” name = “Tamri”> Seqmnis kadrs saxelad “Tamri”, romelzec
SeiZleba Seiqmnas hiperteqsturi gadasvla Semdegi saxiT:
A href = “moreinfo.html” Target = “Tamri”>
Click here to jump to Tamri </A>
atributi Target Seicavs freimis saxels. am hiperteqstis aqtivizaciis dros freim
“Tamri”-s Semcveloba anu igive info.html, Seicvleba failiT moreinfo.html. atributi
Target rom ar yofiliyo, moreinfo.html im fanjaraSi an freimSi iqneboda, sadac aris
hiperteqsti. atributi TARGET swored im freimis misaTiTebladaa gankuTvnili,
romelSic ganTavsdeba Href atributiT gansazRvruli faili.
davubrundeT magaliTs, romelsac saxelad Ali.html davarqviT. masSi
gansazRvrulia sami freimi – logo.html, menu.html da content.html. imisaTvis, rom
kargad gamoCndes TiToeuli freimis sazRvari, kodSi waSaleT border=”0”.
davuSvaT, menu.html dokuments aqvs Semdegi saxe:
magaliTi:
<html>
<head>
<title> Document with menu </title>
</head>
<body>
60
<center>
<a href = “content.html”>Main </a>
<a href = “book 1.html”> Book 1 </a>
<a href = “book 2.html”> Book 2 </a>
<a href = “book 3.html”> Book 3 </a>
<a href = “book 4.html”> Book 4 </a>
<a href = “book 5.html”> Book 5 </a>
</center>
</body>
</html>
dokumentebi, romlebzec xdeba gadasvla a href-is saSualebiT, ixsneba imave
freimSi, romelSic moTavsebulia menu.html dokumenti. Tqven gWirdebaT, rom is
gaixsnas freimSi, romelSic moTavsebulia faili “content.html”, meniu ki ekranze
darCes ucvleli saxiT. rogor unda gakeTdes es? swored aq gvWirdeba
zemoTxsenebuli atributi name. Ali.html Seicvleba Semdegnairad:
<html>
<head><title> Creating frames </title></head>
<frameset cols = "100, *">
<frameset rows = "100, *">
<frame src = "logo.html" scrolling = "no">
<frame src = "menu.html">
</frameset>
<frame src = "content.html" name = "tea">
</frameset>
</html>
parametris saxeli freims aniWebs unikalur saxels. Cvens SemTxvevaSi
freims, romelic Seicavs fails content.html, mieniWa saxeli tea. freimis saxeli
SeiZleba SemdegSi gamoyenebuli iyos sxva dokumentebidan (freimebidan)
masze mimarTvisaTvis atribut target-is saSualebiT. SemovitanoT atributi target
failSi menu.html. TiToeuli bmulisaTvis mivuTiToT parametri target=“tea”, sadac tea
aris freimis saxeli, romelSic moTavsebulia faili content.html.
<html>
<head>
<title> Document with menu </title>
</head>

61
<body>
<center>
<a href = "content.html" target="tea">Main </a>
<a href = "book 1.html" target="tea"> Book 1 </a>
<a href = "book 2.html" target="tea"> Book 2 </a>
<a href = "book 3.html" target="tea"> Book 3 </a>
<a href = "book 4.html" target="tea"> Book 4 </a>
<a href = "book 5.html" target="tea"> Book 5 </a>
</center>
</body>
</html>
axla yvela bmuli gaixsneba CvenTvis saWiro freimSi, meniu ki ucvlelad
darCeba. amisaTvis saWiro gaxda mxolod ori dokumentis Secvla. pirveli es aris
freimebis Semcveli dokumenti, meore - menu.html.
zogjer saWiroa dokumenti gaixsnas mTlian fanjaraSi, anu dairRves
freimebis mTeli struqtura. amisaTvis saWiroa parametr target -s mieces
mniSvneloba -top: <a href = "content.html" target="_top">Main </a>
SesaZlebelia erTdroulad ramdenime freimis Semcvelobis ganaxleba erTi
bmulis aqtivizaciiT. davuSvaT, gvaqvs faili Frames.html
<html>
<head>
</head>
<Frameset Rows =” 25%, 50%, 25%”>
<Frame src = “header.htm”>
<Frameset cols = “25%, 75%”>
<Frame src = “label.html”>
<Frame src = “info.html”>
</Frameset>
<Frame src = “footer.html”>
</Frameset>
</html>
es yvelaferi SesaZlebelia warmovadginoT sxvagvaradac:
<Html>
<head>
</head>

62
<Frameset Rows = "25%, 50%, 25%">
<Frame src = "header.html">
<Frame src = "nested.html" Name = "Inner">
<Frame src = "testlink.html">
</Frameset>
</html>
avRniSnoT rom sul bolo, qveda freimis Sesabamis dokuments hqvia testlink.html.
swored testlink.html Seicavs bmuls, romlis Semowmebasac Cven axla
movaxdenT. qvemoT moyvanilia nested.html failis kodi. es faqtiurad aris ori freimi
(label.html da info.html), romelic aRiniSneba erTi saxeliT Inner.
<Html>
<head>
</head>
<Frameset cols = "25%, 75%,">
<Frame src = "label.html">
<Frame src = "info.html">
</Frameset>
</html>
fails testlink.html aqvs Semdegi saxe:
<html>
<head>
<title>
</title>
</head>
<body>
<a href = "Newstuff.html" Target= "Inner">
Click me </a>to put new stuff into the center frameset
</body>
</html>
Click me bmulis aqtivizaciis dros moxdeba ori centraluri freimis ganaxleba,
romlebic adre nested.html failiT iyo gansazRvruli. maTSi iqneba moTavsebuli
dokumenti Newstuff.html.
<html>
<head>
<title>

63
</title>
</head>
<body>
Here is some New stuff!
</body>
</html>
amgvarad, ori centraluri freimi SevcvaleT axali informaciis Semcveli erTi
kadriT.

26. obieqtebi Html dokumentSi


imisaTvis, rom Html dokumenti gaxdes dinamiuri, Tqven SegiZliaT
specialuri tegebis saSualebiT masSi sxvadasxva obieqtebi moaTavsoT. erTi
tegi, romlis saSualebiTac Html dokumentSi SeiZleba obieqtis moTavseba,
TqvenTvis ukve cnobilia: <img> tegis saSualebiT Html dokumentSi SegiZliaT
CasvaT suraTi. garda suraTisa, Html dokumentSi SesaZlebelia musikis, sxva
dokumentis, flash-animaciis, klipebis da sxva mravali obieqtis Casma.
tegi iftame erTi html dokumentis meore html dokumentSi moTavsebis
saSualebas iZleva. iframe-sTvis ar aris saWiro frame dokumentis Seqmna.
tegi <iframe> mieTiTeba Semdegnairad: <iframe src = "nino.html" width = "300" height =
"250" scrolling = "auto" frameborder = "1"> </iframe>
zogadad html dokumentSi obieqtebis Casasmelad arsebobs tegi <object> es
tegi sakmaod mravalfunqciuria. misi gacnoba am saxelmZRvaneloSi iqneba
mokle da mimoxilviTi. ufro dawvrilebiT SegiZliaT gaecnoT Html-is oficialur
dokumentacias, sadac detaluradaa aRwerili teg <object>-is gamoyenebis yvela
SesaZlebloba. sanam gavecnobodeT am tegsa da mis funqciebs, gavixsenoT

cotaodeni, adre ganvlili masalidan.


TqvenTvis ukve nacnobia tegi <img>. Tqvens dokumentSi suraTis
Casasmelad dawerili kodi gamoiyureba Semdegnairad:
<img src = “bona.jpg” alt = “this is my dog”>
TqvenTvis aq yvelaferi gasagebia. src miuTiTebs gzas dokumentisaken bona.jpg,
alt - alternatiuli aRweraa, yoveli SemTxvevisaTvis, Tu suraTi ar CaitvirTeba.
igives gakeTeba SeiZleba teg <object>- is saSualebiT:
<object data = “bona.jpg” type = “image/jpeg”>

64
this is my dog
</object>
axla ganvixiloT zemoT moyvanili kodi. atributi data uTiTebs gzas
dokumentisaken. atributi type gviCvenebs monacemebis tips, anu miuTiTebs
brauzers ra tipis obieqtTan aqvs mas saqme. Cvens SemTxvevaSi es aris image -
gamosaxuleba, suraTi, jpeg-suraTis (gamosaxulebis) tipi. teqsts, romelic
moTavsebulia <object> </object> tegis SigniT, momxmarebeli (damTvalierebeli)
dainaxavs im SemTxvevaSi, Tu brauzeri ver SeZlebs ekranze asaxos Tqveni
obieqti - suraTi.
video-klipis Html dokumentSi CatvirTvisaTvis kodi analogiuria:
<object data = “film.mpeg” type = “application/ mpeg”>
there was a film
</object>
magaliTi: davamatoT Cvens internet gverds xma an videoklipebi.
<html>
<head>
<title>Video files and sound</title>
</head>
<body>
<I>Sound</I>
<a href="shl.wav">Sound1</a><br>
<i>Music background</i><br>
<Bgsound src="1.mid" Loop=Infinite>
<i>Advertising Video with standard control board:</i>
<embed src="name.avi" width=300 heigth=200>
</body>
</html>
brauzerebis umravlesoba saSualebas iZleva mimarTos bgeriT failebs .AU,
MID/MIDI, WAV da videofailebs .MPG/.MPEG, .QT da .AVI formatebSi:
<a href=”audiofailis URL”>aRwera</a>;
<a href=”videofailis URL”>aRwera</a>
gverdis CatvirTvisas musikaluri fonis Sesaqmnelad vwerT:
<Bgsound src=”audiofailis URL” Loop=n|Infinite>, sadac Loop=n; n aris
ganmeorebebis ricxvi (n=1, 2, 3….); Tu miTiTebulia Loop=infinite, maSin videofailis
Cveneba usasrulod gagrZeldeba;

65
SeiZleba pirdapir web-gverdze iyos videoklipi:
<embed name = saxeli src=”videofailis URL” Height=Y Width=X Autostart=true>
teg Embed - is atributebi
Src= name.avi (video klipis saxeli);
Width = X; Height = y; gamosaxulebis sigane (simaRle) piqselebSi
Autostart = true; Tu ar mivuTiTebT Autostart=true-s, maSin videoklipi dokumentis
CatvirTvisas, avtomaturad ar CairTveba. misi CarTva moxdeba marTvis
RilakebiT (true/false); Repeat = true saSualebas iZleva an krZalavs videofailis
gameorebas (true / false).
Play_ loop = z; Tu Tqven miuTiTeT Repeat = true, z-is nacvlad aq miuTiTeT
ganmeorebebis ricxvi.
Controls = Smallconsole gamoiyeneT es atributi, Tu gnebavT rom marTvis pulti
patara iyos.
videofaili SeiZleba CavdgaT HTML dokumentSi <Img> tegis daxmarebiT.
amisaTvis aris Img-is atributi Dynsrc = “--“ da arasavaldebulo atributebi LOOP =
n/Infinite (ganmeorebebis ricxvis misaTiTeblad) da Controls (marTvis Rilakebis
damateba)
IMG DYNSRC = “ video failis URL” CONTROLS LOOP = n/INTINITE>
zemoT Cven visaubreT Html dokumentSi obieqtebis Casmis SesaZleblobis
Sesaxeb. Tumca musikis, videoklipebis, flash-isa da sxva obieqtebis garda,
arseboben saSualebebi, riTac SegiZliaT “gaacocxloT” da saintereso gaxadoT
Tqveni web-gverdi. swored aseT saSualebas warmoadgenen skriptebi da CSS.
orive Html-sagan gansxvavebuli standartia. isini afarToeben html-is
SesaZleblobebs. aqve avRniSnavT, rom mxolod Html-is SesaZleblobebi
sakmaod SezRudulia. swored amis gamo mas ukve didi xania swraf sikvdils
uwinaswarmetyveleben, rogorc web-is standarts. Tumca, rogorc xedavT, is jer
kidev cocxalia da kidev didxans icocxlebs. mizezi martivia. Html-is Seswavla
Zalian advilia, nebismier adamians SeuZlia misi aTviseba. rac Seexeba mis
naklovanebebs, amisaTvis standartis SemmuSaveblebma Html-Si Semoitanes
tegebi, romlis daxmarebiTac Html dokumentSi SesaZlebelia sxvadasxva
obieqtebis moTavseba, misTvis sxva teqnologiebis (CSS, Javascript da a.S.)
mibma.
am teqnologiebis Seswavla aucilebelia, Tu gnebavT profesionalurad
SeqmnaT Tqveni web-gverdebi. maT Sesaxeb saxelmZRvanelos II nawilSi

66
visaubrebT. yvelasaTvis gasagebi WeSmaritebaa, jer unda viswavloT ufro
martivi teqnologiebi, imisaTvis, rom SemdgomSi advilad gavigoT ufro rTuli.

27. formebi
formebi yvelaze popularul saSualebas warmoadgenen msoflio ablabudaSi
interaqtiuli urTierTqmedebisaTvis. Html-is formebi mkiTxvelisagan informaciis
miRebis saSualebas iZlevian. Html-is daxmarebiT Tqven SegiZliaT SeqmnaT
martivi formebi, romlebic iTvaliswineben “diax” da “ara” tipis pasuxebs.
SegiZliaT SeqmnaT rTuli formebi SekveTebisTvis an imisaTvis, rom Tqveni
mkiTxvelebisagan miiRoT raime komentari an keTili survilebi.
formebi ramdenime velisagan Sedgeba, sadac momxmarebels SeuZlia
Seitanos garkveuli informacia an airCios romelime ofcia. mas Semdeg, rac
momxmarebeli gaagzavnis informacias, is damuSavdeba programis (skriptis)
mier, romelic moTavsebulia serverze. skripti - es mokle programaa, specialurad
Seqmnili TiToeuli formis dasamuSaveblad.
bevri amjobinebs ar iswavlos Teoria da isargeblos vizualuri html-
redaqtorebiT, romlebic formas TviTon qmnian da misgan ar moiTxoven html-is
codnas. Tqven ra Tqma unda, SegiZliaT isargebloT aseTi redaqtorebiT, magram
am SemTxvevaSi Tqven iqnebiT sakmaod SezRuduli. aseTi redaqtorebi
yovelTvis ar iZlevian im Sedegebis miRwevis saSualebas, romelic Tqven
miznad daisaxeT isev da isev TavianTi mouqnelobis da SesaZleblobebSi
SezRudulobis gamo. saukeTeso redaqtorebi, es arian teqsturi redaqtorebi,
sadac Tqven SegiZliaT kodi Tqven TviTon sakuTari xelebiT daweroT.
formebi iqmnebian html-is saSualebiT. Tumca amas xSirad Sehyavs xalxi
SecdomaSi. bevri Tvlis, rom sakmarisia iswavlon formebis Seqmna Html-is
saSualebiT, rom maT saitze gamoCndes, magaliTad e.w. stumarTa wigni. es
arasworia.
forma - es mxolod karkasia. Html-is daxmarebiT Cven mxolod
ganvsazRvravT, rom vTqvaT, aq gveqneba formis veli, aq - Rilaki, Rilakze ki
iqneba warwera da a.S. imisaTvis rom formis Rilakze daWerisas Tqveni
Setyobineba daematos stumarTa wigns, saWiroa sxva teqnologia, saWiroa
raime programa, skripti, romelic Cven unda mivabaT Cvens formas. Cven am
saxelmZRvanelos farglebSi SeviswavliT mxolod imas, rogor SevqmnaT formebi
Html-is saSualebiT.

67
Html dokumentSi formebi Semodis teg <form> </form> -is saSualebiT:
<form>
</form>
monacemebi formidan SeiZleba gaegzavnos dasamuSaveblad romelime skripts
(gza skriptamde, ra Tqma unda, unda mieTiTos):
<form action = “http//www.mysite.ge/cgi_bin/guestbook/”>
</form>
an romelime safosto servers:
<form action: “mailto:tea_todua@yahoo.com”>
</form>

28. formis tegebTan muSaoba


formis elementebi arc ise bevria. esenia Rilakebi, almebi, gadamrTvelebi,
velebi da siebi. garda amisa, formebSi SeiZleba sxva obieqtebi Caisvas.
formebis Seswavlas SevudgeT konkretuli magaliTebis ganxilviT. daviwyoT
aseTi formiT:
Your Name:

Your Comments:

OK Cancel

mocemul formaSi gvaqvs Semdegi elementebi: veli raime informaciis


Sesatanad (name), veli teqstis Sesatanad (Comments), gagzavnisa da informaciis
gagzavnis Sewyvetis Rilakebi.
warmoidgineT, rom Cveni hosteri (kompania romelic gvaZlevs adgils
web_gverdis gansaTavseblad), ar gvaZlevs saSualebas gamoviyenoT skriptebi,
amitom ar SegviZlia mocemuli forma mivabaT e.w. stumarTa skriptis wigns,
raTa gagzavnis Rilakze daWerisas monacemebi formidan maSinve daematos
saits. Tumca gvinda, rom gverdis damTvalierebels CvenTvis SeeZlos Tavisi

68
gamoxmaurebis gamogzavna, amitom am formaSi mivuTiTebT, rom formidan
monacemebi gamoigzavnos Cvens E-mail-ze:
<form action: “mailto:lasha_verulava@yahoo.com”> </form>
SemovitanoT am konstruqciaSi formis elementebi. formis mravali elementis
Seqmna SeiZleba, teg <input>-is meSveobiT. elementis tipi ganisazRvreba am
tegis atributebiT.
SevqmnaT veli raime informaciis Sesatanad, magaliTad SevqmnaT veli im
adamianis saxelis Sesayvanad, romelic avsebs formas:
<html>
<head><title>input1.html</title></head>
<body>
<form action = “mailto: lasha_verulava @yahoo.com”>
input type = text name = firstname>
</form>
</body>
</html>
maS ase, tegi <input>, rogorc ukve viciT, qmnis formis elements.
konkretulad romel elements – es Cven ukve ganvsazRvreT atribut type-is
meSveobiT, rodesac mas mivaniWeT mniSvneloba text. type=text qmnis elements
erTstriqoniani teqstis Sesayvanad.

Name elementis saxelia, aucilebeli atributia. garda aucilebeli atributebisa type da


name, formis elements aqvs sxva atributebic, value teqstis Setanis velisaTvis (da
ara mxolod misTvis), size - teqstis Sesatani velis sigrZe (izomeba nabeWd
simboloebSi, misi mniSvneloba avtomaturad 20-is tolia), maxlength -
gansazRvravs im simboloebis maqsimalur ricxvs, romelic momxmareblis mier
iqneba Setanili formis velSi.
<html>
<head><title>input1.html</title></head>
<body>
<form action="mailto: lasha_verulava @yahoo.com">
<input type="text" name="firstname"
value = "Enter your name" size = "40" maxlength = "20">
</form>

69
</body>
</html>
yvelaferi es gamoiyureba Semdegnairad:

maS ase, veli gaxda ufro grZeli, radgan Cven SevitaneT misTvis mniSvneloba
size = “40”. momxmarebels ar SeuZlia am velSi dabeWdos 20-ze meti simbolo
(maxlength = “20”), value ki ubralod miuTiTebs, konkretulad ra unda iqnes Setanili
am velSi.
Cvens formaSi SemovitanoT momdevno elementi: veli komentaris Sesatanad.

aseTi veli Cndeba teg <textarea> </textarea>-s meSveobiT. <textarea> qmnis


elements mravalstriqoniani teqstis Sesatanad.
<html>
<head>
<title>input1.html</title>
</head>
<body>
<form action="mailto: lasha_verulava @yahoo.com">
<input type="text" name="firstname"
value = "Enter your name" size = "40" maxlength = "20"><br><br>
<textarea name="comments"></textarea>
</form>
</body>
</html>
ganvixiloT zemoT aRwerili kodi: name - rogorc ukve iciT, aucilebeli atributia,
amitomac SemovitaneT is. imisaTvis, rom formis elementebi gangveTavsebina
erTmaneTis qveS, Cven SemovitaneT TqvenTvis ukve nacnobi tegi <br>. imis
gansazRvra, rogor ganTavsdebian formis elementebi erTmaneTis mimarT,

70
Tqven SegiZliaT TqvenTvis ukve nacnobi tegebisa da atributebis meSveobiT.
axla Cvens formas davamatoT teqstebi (Your name da Your comments):

Your Name:

Your Comments:

dawvrilebiT ganvixiloT <textarea> da misi atributebi. maTi saSualebiT SeiZleba


mivuTiToT velis simaRle (rows - striqonebis raodenoba), velis sigane (cols -
nabeWdi simboloebis raodenoba striqonSi), SevitanoT teqsti, romelic aisaxeba
formaSi.

<html>
<head>
<title>
input1.html
</title>
</head>
<body>
<form action="mailto: lasha_verulava @yahoo.com">
Your Name:<br>
<input type="text" name="firstname"
value = "Enter your name" size = "40" maxlength = "20"><br><br>
Your Comments:<br>
<textarea rows =7 cols=40 name="comments"></textarea>
</form>
</body>
</html>
miiReba Semdegi saxis forma:
Your Name:

71
Your Comments:

formis Sesaqmnelad samuSaos garkveuli nawili ukve Sesrulda. darCa ori


tipis Rilakis Seqmna. informaciis gagzavnis Rilaki (Tqvens elfostaSi an
skriptisaTvis dasamuSaveblad) iqmneba TqvenTvis ukve nacnobi teg <input>-is
da misi atribut type-is meSveobiT.

<html>
<head>
<title>
input1.html
</title>
</head>
<body>
<form action="mailto: lasha_verulava @yahoo.com">
Your Name:<br>
<input type="text" name="firstname"
value = "Enter your name" size = "40" maxlength = "20"><br><br>
Your Comments:<br>
<textarea rows =7 cols=40 name="comments"></textarea><br><br>
<input type=submit>
</form>
</body>
</html>

Sedegi:
Your Name:

Your Comments:
72
Submit Query

rogorc ukve naxeT, RilakisTvis atributi name ar aris aucilebeli. Reset Rilaki
iqmneba analogiurad. mxolod type-sTvis Cven Segvyavs mniSvneloba ara submit,
aramed reset:
<input type=reset>
Sedegi:
Your Name:

Your Comments:

Submit Query Reset

Rilakebze standartuli warwerebi SegiZliaT SecvaloT sakuTariT, TqvenTvis ukve


nacnobi tegis value-s saSualebiT:
<html>
<head>
<title>input1.html</title>
</head>
<body>
<form action="mailto: lasha_verulava @yahoo.com">
Your Name:<br>
<input type="text" name="firstname"
value = "Enter your name" size = "40" maxlength = "20"><br><br>
Your Comments:<br>
<textarea rows =7 cols=40 name="comments"></textarea><br><br>

73
<input type=submit value="OK">
<input type=reset value="Cancel">
</form>
</body>
</html>
Sedegi:
Your Name:

Your Comments:

OK Cancel

forma ASeiqmna, magram amiT yvelaferi ar damTavrebula. Cven dagvaviwyda


Cagvesva erTi Zalian mniSvnelovani atributi, romlis gareSec forma ar
imuSavebs:
<form action="mailto: lasha_verulava @yahoo.com" method=post>
Method gansazRvravs formidan monacemebis gagzavnis meTods (skriptisaTvis
an safosto serverze). SesaZlo mniSvnelobebia: get an post.
axla SevqmnaT ufro rTuli forma. davuSvaT Tqven SeqmeniT saiti kinos
Sesaxeb. saitze gindaT ganaTavsoT gamokiTxvis forma, raTa gaarkvioT romeli
filmebi da msaxiobebi moswons im xalxs, romelTac uyvarT kinos yureba. prizis
saxiT erT-erTi maTgani miiRebs sagzurs mis mier arCeul qveyanaSi
samogzaurod.
anketas, romelsac Tqven SesTavazebT Tqveni saitis damTvaliereblebs,
eqneba Semdegi saxe:

74
am anketaSi bevria formis TqvenTvis ucnobi elementebi. Tumca aris is
elementebic, romlebic ukve ganvixileT. Tavidan SevqmnaT is elementebi,
romlebic CvenTvis nacnobia.
CvenTvis cnobilia rogor Semodis forma dokumentSi:
<form name = “anketa” method = “post” action = “http://mysite.ge/script”>
</form>
Name - aucilebeli elementi, formis saxeli.
Method - formis damuSavebis meTodi.
Action - gza skriptisaken, romelic daamuSavebs formas, an el.fosta sadac
gaigzavneba monacemebi formidan.
Tqven ukve iciT teqstis Seyvanis velis Seqmna (Your name da Your E-mail)
<html>
<head><title>input1.html</title></head>
<body>
<form name = "anketa" method = "post"
action = "http:/mysite.ge/script">

75
<b> Your name </b> <br>
<input type = text name = "fns" size = 37 maxlength = 30> <br> <br>
<b> Your E-mail: </b> <br>
<input type = text name = "email" size = 37 maxlength = 30”>
</form>
</body>
</html>
type = text-is saSualebiT Cven mivuTiTeT, rom unda Seiqmnas veli teqstis
Sesatanad. Name - elementebis saxelebia. Size - teqstSi Sesatani velebis zoma.
Maxlength - simboloebis is maqsimaluri raodenobaa, romlis Setanac SeuZlia
aRniSnul velebSi anketis Semvsebs.
Cvens mier Seqmnili forma, jerjerobiT ase gamoiyureba:
Your name

Your E-mail:

rogorc xedavT, saboloo Sedegamde jer kidev Soria. TqvenTvis aseve cnobilia,
rogor unda Seiqmnas Send da Cancel Rilakebi:
<input type = Submit value = "Send">
<input type = reset value = "Cancel">
miiReba Semdegi saxis forma:
Your name

Your E-mail:

Send Cancel

formaSi, romlis Seqmnasac vapirebT, sxva CvenTvis aqamde cnobili elementi


ar aris. ase rom, gavlili masalis gameorebis sasiamovno procesi dasrulebulia.
iwyeba axali masalis Seswavla. daviwyoT e.w. “gadamrTvelebiT”:
You are: Male o Female o
formis am elementis Tavisebureba mdgomareobs imaSi, rom isini
momxmarebels aZleven arCevis saSualebas: an-an. ganvixiloT kodi, romelic
unda daematos Cvens mier Seqmnil formas:
76
<b> You are: </b>
Male <input type = radio name = “sex” value = “Male”>
Female <input type = radio name = “sex” value = “Female”>
<br> <br>
am kodis damatebiT miiReba Semdegi suraTi:
Your name

You are: Male Female

Your E-mail:

Send Cancel

amrigad, “gadamrTvelebi” formaSi Semodian TqvenTvis ukve nacnobi teg


<input>-is meSveobiT. miaqcieT yuradReba, rom “gadamrTvelebisaTvis” saxeli
erTidaigive iyos. radgan isini faqtiurad erT elements warmoadgenen. Value,
cxadia, rom unda iyos sxvadasxva.
gadavideT formis aqamde ucnob elementebze, e.w. “almebze”. es elementic
iZleva arCevanis gakeTebis saSualebas. e.w. “almebi” “gadamrTvelebisagan”
gansxvavdeba imiT, rom aq momxmarebels SeuZlia moniSnos rogorc erTi,
aseve ramdenime varianti erTdroulad. “gadamrTvelebi” ki, rogorc ukve iciT,
SemoTavazebuli variantebidan mxolod erTis moniSvnis saSualebas iZleva.
qvemoT mocemulia Sesabamisi kodi da miRebuli Sedegi:
<html>
<head><title>input1.html</title></head>
<body>
<form name = "anketa" method = "post" action = "http:/mysite.ge/script">
<b> Your name </b> <br>
<input type = text name = "fns" size = 37 maxlength = 30> <br> <br>
<b> You are: </b>
Male <input type = radio name = “sex” value = “Male”>
Female <input type = radio name = “sex” value = “Female”>
<br> <br>
<b> What Kind films do you like?
</b> <br>

77
<input type = checkbox name = "fiction" value = "yes"> fiction <br>
<input type = checkbox name = "thriller" value = "yes"> thriller <br>
<input type = checkbox name = "adventure" value = "yes"> adventure <br>
<input type = checkbox name = "melodrama" value = "yes"> melodrama <br>
<input type = checkbox name = "documentary" value = "yes"> documentary <br> <br>
<b> Your E-mail: </b> <br>
<input type = text name = "email" size = 37 maxlength = 30”><br><br>
<input type = Submit value = "Send"><input type = reset value = "Cancel">
</form>
</body>
</html>

rogorc xedavT, yvelaferSi “damnaSave”, TqvenTvis ukve nacnobi tegi


<input>-ia, mxolod amjerad misi atributi Rebulobs mniSvnelobas checkbox
(type=checkbox), miaqcieT yuradReba, rom TiToeul “alams” aqvs Tavisi unikaluri
saxeli, samagierod mniSvnelobaa (value) yvelasaTvis erTnairi.

78
Tu gsurT, romelime alami an gadamrTveli avtomaturad iyos moniSnuli,
kodSi am “almisTvis” an gadamrTvelisTvis SeitaneT atributi checked:
<input type=checkbox name=“adventure” value=“yes” checked> adventure <br>
Sedegad, formaSi romelic waredgineba saitis damTvalierebels Sesavsebad,
punqti adventure moniSnuli iqneba. ra Tqma unda, momxmarebels SeuZlia
moacilos es aRniSvna da Semdeg SearCios is, romelic TviTon surs.
gadavideT TqvenTvis ucnob Semdeg elementze:

In What county would you like to go:

<b> In What county would you like to go:


</b>
<br>
<select name = "country">
<option value = "France"> France
<option value = "Japan"> Japan
<option value = "England"> England
<option value = "Italy"> Italy
<option value = "China"> China
</select>
<br>
<br>
siaSi pirveli punqti Cans ekranze rogorc arCeuli. Tumca atribut selected-is
saSualebiT, SesaZlebelia ekranze, rogorc ukve arCeuli, gamoCndes is qveyana,
romlisTvisac am atributs mivuTiTebT.
<option value = “Italy” selected> Italy

miiReba Semdegi suraTi:

79
darCa formis mxolod erTi elementi. kodi iwereba Semdegnairad:
<b> Who is your favorite actor? </b>
<br>
<select name: "actor" size = "4">
<option value ="Ninidze"> Merab Ninidze
<option value ="Kipshidze"> Zurab Kipshidze
<option value ="Eliava"> Lia Eliava
<option value ="Koberidze"> Otar Koberidze
<option value ="Archvadze"> Tengiz Archvadze
</select>
atributi size miuTiTebs siaSi im striqonebis raodenobaze, romelic ekranze
Cans. Cvens SemTxvevaSi, size = 4. ekranze Cans oTxi striqoni.

sabolood, mTliani kodi miiRebs saxes.


<html>
<head>

80
<title>input1.html</title>
</head>
<body leftmargin=200>
<form name = "anketa" method = "post"
action = "http:/mysite.ge/script">
<b> Your name </b> <br>
<input type = text name = "fns" size = 37 maxlength = 30> <br> <br>
<b> You are: </b>
Male <input type = radio name = “sex” value = “Male”>
Female <input type = radio name = “sex” value = “Female”>
<br> <br>
<b> What Kind films do you like?
</b> <br>
<input type = checkbox name = "fiction" value = "yes"> fiction <br>
<input type = checkbox name = "thriller" value = "yes"> thriller <br>
<input type = checkbox name = "adventure" value = "yes"> adventure <br>
<input type = checkbox name = "melodrama" value = "yes"> melodrama <br>
<input type = checkbox name = "documentary" value = "yes"> documentary <br> <br>
<b> Who is your favorite actor? </b> <br>
<select name: "actor" size = "4">
<option value ="Ninidze"> Merab Ninidze
<option value ="Kipshidze"> Zurab Kipshidze
<option value ="Eliava"> Lia Eliava
<option value ="Koberidze"> Otar Koberidze
<option value ="Archvadze"> Tengiz Archvadze
</select>
<br>
<br>
<b> In What county would you like to go:
</b> <br>
<select name = "country">
<option value = "France"> France
<option value = "Japan"> Japan
<option value = "England"> England
<option value = "Italy" selected> Italy

81
<option value = "China"> China
</select>
<br> <br>
<b> Your E-mail: </b> <br>
<input type = text name = "email" size = 37 maxlength = 30”><br><br>
<input type = Submit value = "Send">
<input type = reset value = "Cancel">
</form>
</body>
</html>
qvemoT ganxiluli kodebis kompiuteruli realizacia dagexmarebaT ukeT
aiTvisoT zemoT gadmocemuli masala formebze. qvemoT ganxiluli kodi qmnis
sias saxelwodebiT occupation, romelsac aqvs xuTi ofcia: programmer, doctor, actor,
chemist, teacher.
magaliTi I:
<html>
<head>
<title> Select1 </title>
</head>
<Body>
Your Speciality:
<form>
<select name = "occupation">
<Option selected value = "programmer"> Programmer
<option value = "doctor"> Doctor
<option value = "chemist"> Chemist
<option value = "actor"> Actor
<option value = "teacher"> Teacher
</select>
</form>
<body>
</html>
am kodSi select name = “occupation”-is Secvla brZanebiT select multiple name =
“occupation” mogvcems fanjaras, romelSic gamoCndeba erTdroulad siis
ramdenime wevri.

82
garda arCevanis gakeTebisa, mkiTxvelebs unda hqondeT saSualeba
TviTonac daumaton axali elementi.
<html>
<head>
<title> Select1 </title>
</head>
<Body>
Your Speciality:
<form>
<select name = "occupation">
<Option selected value = "programmer"> Programmer
<option value = "doctor"> Doctor
<option value = "chemist"> Chemist
<option value = "actor"> Actor
<option value = "teacher"> Teacher
<option value="other">Other. . .
</select>
</form>
<body>
</html>

qvemoT mocemuli magaliTi saSualebas iZleva parolis Sesabamisi


simboloebi varskvlavebiT SevcvaloT.
magaliTi II:
<html>
<head>
<title>Password</title>
</head>
<body>
<form>
Enter the secter word
<input type="password" name="secret_word" size="30"
Maxlength="30">
</form>
</body>

83
</html>

magaliTi III:
<html>
<head>
<title> Radio1.html </title>
</head>
<body>
Form # 1:
<Form>
<input type = "radio" Name = "choice" value = "choice 1"> Yes
<input type = "radio" Name = "choice" value = "choice 2"> No
</form>
<HR>
Form # 2:
<Form>
<input type = "radio" Name = "choice" value = "choice 1" checked> yes
<input type = "radio" Name = "choice" value = "choice 2"> No
</form>
</body>
</html>

am kodis modifikaciiT miviRebT:


<html>
<head>
<title> Radio 2.html </title>
</head>
<body>
<Form>
One choice: <Br>
<Input type = "radio" name = "choice " value = "choice 1" checked> (1)
<Input type = "radio" name = "choice 1" value = "choice 2"> (2)
<Input type = "radio" name = "choice 1" value = "choice 3"> (3)
<Br>
One choice: <Br>

84
<Input type = "radio" name = "choice 2" value = "choice 1" checked> (1)
<Input type = "radio" name = "choice 2" value = "choice 2"> (2)
<Input type = "radio" name = "choice 2" value = "choice 3"> (3)
<Input type = "radio" name = "choice 2" value = “choice 4”> (4)
<Input type = "radio" name = "choice 2" value = "choice 5"> (5)
</form>
</body>
</html>

magaliTi IV: <html>


<head>
<title> Reset.html </title>
</head>
<body>
<Form>
<Input type = "reset"><br>
<Br>
<Input type = "reset" value = "clear that form!"><br><br>
<Input type = "submit" value = "send data!">
</form>
</body>
</html>
magaliTi V:
<html>
<head>
<title> Form Design </title>
</head>
<body>
<H1> Forms</H1>
<form>
please enter the new title for the message: <Br>
<Input name = "name" Size = "40">
<HR>
Your comments: <Br>
<Textarea Rows = "6" Cols = "70"> </textarea>

85
</form>
</body>
</html>

magaliTi VI. winaswar formatirebuli teqstis gamoyeneba:


<html>
<head><title> Form Design </title></head>
<body>
<H1> Using PRE Tags </H1>
<form>
<pre>
Name: <Input type = "text" Name = "name" size = "50">
E-mail: <Input type = "text" Name = "email" size = "50">
Street Address: <Input type = "text" Name = "street 1" size = "30">
<Input type = "text" Name = "street 2" size = "30">

City: <Input type = "text" Name = "city" size = "50">


State: <Input type = "text" Name = "state" size = "2">
Zip: <Input type = "text" Name = "zip" size = "10">
</PRE>
</form>
</body>
</html>
sxva meTods formebis velebis gasworebisaTvis warmoadgens cxrilebis
gamoyeneba. efeqti iseTive iqneba, rogoric winaswar formatirebuli teqstis
gamoyenebisas:
magaliTi VII:
<html>
<head><title> Form Design </title></head>
<body>
<H1> Using Html tables </H1>
<form>
<table>
<TR> <TD> Name: </TD> <TD> <Input type = "text" Name = "name" Size = "50">
</TD> </TR>

86
<TR> <TD> E-mail: </TD> <TD> <Input type = "text" Name = "email" size= "50">
</TD> </TR>
<TR> <TD> Street Address: </TD> <TD> <Input type = "text" Name ="street 1"
size = "30"> </TD> </TR>
<TR> <TD> </TD> <TD> <Input type = "text" Name = "street 2" size = "30"> </TD> </TR>
<TR> <TD> City: </TD> <TD> <Input type = "text"
name = "city" size = "50"> </TD> </TR>
<TR> <TD> State: </TD> <TD> <Input type = "text"
Name = "state" size = "2"> </TD> </TR>
<TR> <TD> Zip: </TD> <TD> <Input type = "text"
Name = "zip" size = "10"> </TD> </TR>
</table>
</form>
</body>
</html>
Tu Tqven qmniT didsa da rTul formas, maSin azri aqvs mis logikur nawilebad
dayofas. am mizniT SeiZleba abzacis <p> tegis gamoyeneba.
xSirad formebis sasurveli komponirebisaTvis sakmaod moxerxebelia siebis
tegebis gamoyeneba.
formis komponireba siebis tegebis gareSe:
magaliTi VIII:
<html>
<head><title> Form Layout and Design </title></head>
<body>
<H1> checkboxes and Radio buttons </H1>
<Form>
What programming languages do you use? <Br>
<Input name = "size" Type = "radio" Value = "sm"> C++
<Input name = "size" Type = "radio" Value = "sd"> Pascal
<Input name = "size" Type = "radio" Value = "lg">Basic
<Input name = "size" Type = "radio" Value = "x" >Cobol
<Input name = "size" Type = "radio" Value = "xx"> Algol
</form>
</body>
</html>

87
forma siebis tegebis gamoyenebiT:
magaliTi IX:
<html>
<head><title> Form Design </title></head>
<body>
<H1> Ordered list Tegs </H1>
<Form>
What are your three favorite books?
<OL>
<LI><Input name = "1st" size = "20">
<LI><Input name = "2nd" size = "20">
<LI> <Input name = "3nd" size = "20">
</OL>
</Form>
</body>
</html>
magaliTi X:
<html>
<head><title> Form Layout and Design </title></head>
<body>
<H1> checkboxes </H1>
<Form>
<DL>
<DT> What machines do you work on?
<DD> <Input name = "mac" Type = "checkbox"> Macintosh
<DD> <Input name = "pc" Type = "checkbox"> IBM PC
<DL>
<DT> Unix Workstation
<DD> <Input name = "sun" Type = "checkbox"> Sun
<DD> <Input name = "sgi" Type = "checkbox"> SGI
<DD> <Input name = "next" Type = "checkbox"> NeXT
<DD> <Input name = "aix" Type = "checkbox"> AIX
<DD> <Input name = "lin" Type = "checkbox"> Linux
<DD> <Input name = "other" Type = "checkbox"> Other …
</DL>

88
</DL>
</form>
</body>
</html>

magaliTi XI:
<html>
<head><title> Form Layout and Design </title></head>
<body>
<Form>
What combinations?
<table>
<TR> <TD> </TD> <TD> Red </TD> <TD> Blue </TD> </TR>
<TR> <TD> Small </TD> <TD> <Input name = "sr"
Type = "checkbox"> </TD>
<TD> <Input name = "sb" Type = "checkbox"> </TD> </TR>
<TR> <TD> Medium </TD> <TD> <Input name = "mr"
Type = "checkbox"> </TD>
<TD> <Input name = "mb" Type = "checkbox"> </TD> </TR>
<TR> <TD> Large </TD> <TD> <Input name = "lr"
Type = "checkbox"> </TD>
<TD> <Input name = "lb" Type = "checkbox"> </TD> </TR>
</Table>
</form>
</body>
</html>

magaliTi XII:
<html>
<head><title> Forms </title></head>
<body>
<H1> Muitiple Forms in a document </H1>
<Form>
What ball would you like? <Br>
<Input name = "size" Type = "radio" Value = "rd"> Red
<Input name = "size" Type = "radio" Value = "bl"> Blue

89
<Input name = "size" Type = "radio" Value = "gr"> Green
<p>
<Input type = "submit"
</form>
<HR>
<Form>
<table>
<TR> <TD> Name: </TD> <TD> <Input type = "text" name = "name"
size = "50"> </TD> </TR>
<TR> <TD> E-mail: </TD> <TD> <Input type = "text" name = "E-mail"
size = "50"> </TD> </TR>
<TR> <TD> street address: </TD> <TD> <Input type = "text" name ="street 1"
size = "30"> </TD> </TR>
</table>
<p>
<Input type = "submit">
</form>
<HR>
<Form>
<DL>
<DT> How would you like to pay for this?
<DD> <Input name = "pay" Type = "radio" Value = "cash" checked>Cash
<DD> <Input name = "pay" Type = "radio" Value = "check"> check
</DL>
<p>
<Input type = "submit">
</form>
</body>
</html>

literatura:
1. Учебник по Html.www.dvgu.ru/lemoi/lect/
2. Html & Web - Шаг за Шагом. http://www.firststeps.ru/

90
3. Учебник по Html для чайников. http://postroika.ru
4. Учебник по формам. http://postroika.ru
5. Html Tutorial. http://www.w3schools.com/html/
6. Writing Html. http://www.mcli.dist.maricopa.edu/tut/lessons.html
7. Html Tutorial. http://www.december.com/html/

91