1.1 Html тілінің негіздері

Интернеттің бар мәліметтерінің, яғни барлық Web-парактарының бір ортақ қасиеті-олардың барлығы да HTML тілінде жазылған HTML тілінде Web-парақтар жасау программалауға ұқсас болғанмен, ол қарапайым программалау тілі емес HTML - гипермәтінді белгілеу тілі. Ол кәдімгі мәтіндерді Web-парақтар түрінде бейнелеуге арналған ережелер жиынын анықтайды.

HTML тілі World Wide Web қызмет бабымен бірге дами отырып, Web парақтарының ең жақсы деген мүмкіндіктерін жүзеге асырып, оны кең пайдалану жолдарымен толықтырылып отырылды. Ол World Wide Web жүйесінің негізі бола отырып, оның өте кең тарауына себепші болды. World Wide Web сөзі қазақ тіліне кеңейтілген бүкіләлемдік өрмек болып аударылады. HTML тілінің мағынасы мен атқаратын қызметін оның атынан анықтауға болады

Гипермәтін - қосымша элементтерді басқару мақсатында ішіне арнаулы код, яғни екпінді элемент (anchor) орналасқан мәтін. Ол мәтін ішіне сурет, дыбыс енгізу, мәтінді безендіру, пішіндеу (форматтау) ісін орындайтын немесе осы күжаттың басқа бөлігіне сілтемесі бар алғашқы нүкте ретінде қарастырылатын белгіленген сөз. Сөзді ерекшелеп белгілеу дегеніміз- келесі көрсетілетін кұжат бөлігі калай бейнеленетінін анықтайтын айрықша кодты осы сөз ішіне енгізу. Гипермәтінді бейнелеу үшін броузер (browsers) деп аталатын арнайы көрсету программалары қолданылады. Гипермәтін экранда белгіленген қарапайым сөз ретінде тұрады, егер курсорды сол сөзге жеткізіп, тышқанды шертсек (ENTER пернесін бассақ), онда сонымен байланысты (ол сілтеп тұрған) басқа құжатты оқимыз. Ол құжаттар мәліметтер ішіндегі басқа парақтарда немесе Web жүйесіндегі басқа тораптарда орналасып, бейнежазба, сурет, жазылған дыбыс күйінде болуы мүмкін.

Сонымен, мәтіндерді осылай байланыстыра отырып белгілейтін мүмкіндікті беретін HTML miлі. Оның дұрыс нәтиже алуды қамтамасыз ететін өз заңдылықтары мен ережелері бар.

1.2 Html тілінін атқаратын қызметі

Web парақтары экранда ықшам түрде безендіріліп көрсетілгенмен HTML тілі мәтін ісіпішімдеп көрсететін тілгежатпайды.Өйткені әрбір тұтынушы әртүрлі компьютерлер пайдаланады. Сол себептен ғана зауыттан шыккан бір компьютердің Windows жүйесін жұмыс істей алатын броузері бар болса екінші бір тұтынушы компьютері текMS DOC жүйесінде жұмыс істейтін ескі броузерді пайдалануы мүмкін. Бұл екеуінің көрсету мүмкіндіктері әртүрлі болғандыктан, бір файл екеуіне екі түрлі болып көрсетіледі. Ал,үшін компьютердегі Web-парақтарынын мәтіндері зағиптарға арналған Брайль қаріптері аркылы берілсе, оның нәтижесі тіпті басқаша болады.

Құжаттарды әрбір тұтынушының әртүрлі құрылғыларында және әртүрлі броузер программалармен көретіндіктерін ескерсек, HTML тілін мәтіндерді пішімдеу (форматтау) тәсілдерін жазуға арналған тіл деп айтуға болмайды. Ол Интернеттегі мәтін бөліктерінің аткаратын кызметін анықтап, соларды әрбір түтынушыға бейімдеп жеткізе алатын құжат функционалды түрде белгілейтін тіл болып табылады.

Мысалы, егер мәтін тақырыбын бейнелеу керек болса онда HTML коды оны такырып ретінде көрсетуге тырысады. Такырыптың белгілеу коды алынған соң, оны броузер-программа өз мүмкіндіпн пайдаланып, оны үлкейтіп ірі әріптермен жазуы ыктимал немесе экран жолдарының ортасына жылжытып қана көрсетуіне де болады. Ал егер бұл құжат мәтіні дыбыс синтезаторы аркылы берілетін болса, онда такырып қаттырақ шығатын дауыс аркылы айтылып, одан сон аздап үзіліс жасалуы да мүмкін.

HTML тілінде мәтінді пішімдеу тәсілдерінің де бар екенін айтып кету керек, бірақ алғашқы тұрғыдан алғанда құжаттың мазмұны мен оны безендіріп көрсету жолдарыныңайырмашылығы сакталып отырады. Мысалы, тілдің соңғы HTML 4.0 нұсқасында мәтін пішімдеу командаларын пайдалану ұсынылмаған [6].

E-mail бұлэлектрондық поштаның ағылшынша аталуы, ол-желі қызметтерінің ішіндегі электрондық мәлімет алмасудың ең негізгісі.Электрондық пошта көмегімен барлық құрылықтарда тұратын адамдар бір-біріне электрондық хаттар мен файлдар жібере алады.

Usenet жүйесінің бірнеше анықтамалары бар, олар - тармакталған дискуссия клубты телеконференция, жаңалықтар тобы. Мұның электрондық поштадан айырмашылығын мәліметті бір адамға ғана емес, бірнеше абоненттер тобына (телеконференциялар) жақтайсыз. Әр түрлі мәселелерді талқылау кезінде конференцияға қатынасушылар тең құқықты болып саналады. Әрбір телеконференция бір тақырыпқа(ғылымда өнерде, спорта, т.с.с. арналады және оның өзіндік адресі болады, мұндағы қарастырылатын мәселелер ауқымы әр түрлі бола береді - өте аукымды тақырыптан (бір сұрақтың барлық жағы) тек бір ғана сұраққа дейін (мысалы, филателия) қамтылады.

ISQ (I seek you - мен сені іздеймін) – желі тұтынушыларына накты уақыт кезеңнен(масштабында) хат-хабарлармен алмасып, бірден чат (chat- әңгіме) құрып, файл жіберуге әңгімелесуге мүмкіндік беретін қызмет түрі.

IRC (Internet Relay Chat) - нақты уақыт кезеңінде телеконференция өткізудің бір түрітұтынушылардың бір-бірінен әңгіме-дүкен құруға болатын қызметі. IRC-серверлері мен IRC-клиенттері көмегімен тұтынушылар бір-бірімен «виртуальды» әңгіме өткізуді перне тақтада сөздерді теру арқылы жүргізеді.

IP-телефония. Интернетте телефондағы дабыс арқылы мәлімет алмасуды өтетиімдідеп айтуға болмас, бұл тек TCP/IP хаттамалары негізінде электрондық мәліметті алмасудыңжеке бір түрі ғана. Адамның дауысы цифрлы файлға (аудиофайлдар жасау сияқты) түрлендіріледі де, желідегі, қарпайым мәліметтер пакеттсрі тәрізді түрде тасымалданады. Қазақстан Республикасы байланысынын ұлттык операторы болып саналатын «Қазактелеком» ААҚ-ы осы байланыс түрін практикада пайдаланып жүр[7].

1.3 НTML тілінің қосымша мүмкіндіктері

Мәтіндермен жұмыс.Әріптер құру.Әріп мәтінді өңдеу үшін арналған және оның үлкейтілген алғашқы әріпі, базалық сызық одан бірнеше жол төмендеп тұрады. Әріп оқушының көңілін мәтінге аударады. Егер бұл бетте басқа айқын белгілер болмаса. Әдетте символдың өзінен басқа өсімдік, жануар және басқа заттар қолданылады. Бұл әрине міндетті емес. Бірақта ол мәтінге белгілі бір мән бере алады. Егер де сайтты тура солай жасағыңыз келсе, оған бәрінен де оң жағымен түзетілген сурет жақсы келеді.

1 мысал. Әріпті сурет көмегімен жаса. Әріппен мәтін арасындағы шегіну vspace және hspace параметрлері арқылы тігінен және көлденеңнен беріледі.Суреттің әріптің сапасына лайық болуы келесідегідей: кез келген қаріп пенен әр түрлі есеп қолданылады. Методтың қарапайымдылығы сондай-ақ GIF сапалық форматта қолдану мүмкіндігі, бұл өңдеуше қосымша мүмкіндік туғызады. Кемшілігі: егер әріп сайтте көп қолданылса, көптеген суреттерді әр түрлі әріптерге қолдану керек. Мәтінді редактрлеудің мүмкіндігі қиындайды. Жай ғана әріпті өзгертудің орнына басқа сурет қоюға тура келеді.Мәтіндегі бірінші әріп қисайту үшін, ұяшыққа сол жақпен қисайтылған кестені сызу керек.

2 мысал. Мәтін түріндегі әріп.

<table align=left border=0 cellspacing=0 celpadding=0>

<tr><td><font size=7>"Д</font></td></tr>

</table>Димон, сенде транплюкаторға ұқсас бір нәрсе бар ма?”. “Ұқсасы несі?!” ─ Диманын жауабы ─ “Менде транплюкатордың өзі бар!”. Осы сөзді айтып балконға шығады және ол жерден бір нәрсені алады, сол сәтте ол заттың сол екенін түсінесің.

Қалауымызша фонның түсін және жақтаушысын bgcolor және bordercolor параметрін қолдану керек. Әріп пенен текстін арасындағы шегіну HTML арқылы реттеледі. Символдың қаріптің және көлемін өзгерту үшін стиль қолданылады. Бұл жағдайда код HTML айқындалмайды[8].

3 мысал. Стильдерді қолдану.

<head>

<style type="text/css">

.letter { font-family: Arial; font-size: 24pt; color: navy }

</style>

</head>

<table align=left border=0 cellspacing=0 celpadding=0>

<tr><td><span class=letter>"Д"</span></td></tr>имон, сенде транплюкаторға ұқсас бір нәрсе бар ма?”. “Ұқсасы несі?!” ─ Диманын жауабы ─ “Менде транплюкатордың өзі бар!”. Осы сөзді айтып балконға шығады және ол жерден біп нәрсені алады, сол сәтте ол заттың сол екенін түсінесің.

Әріпті сол жағынан негізгі мәтіннен бөлуге ештеңке кедергі бола алмайды.Осы әрекетпен қарапайым эффекті жасай аламыз. Әріпті орналастыру үшін міндетті түрде екі ұяшықты кесте құру керек, сол жағында бірінші символ, ал екінші жағында қалған мәтін орналасады.

4 мысал. Өрістегі әріп.

<table width=100% border=0>

<tr>

<td valign=top>

<font size=7>В</font>

Немесе

<span class=letter>В</span>

Немесе

<img src=v.gif width=50 height=50></td>

<td valign=top>

Кескіннің мәтінмен ағуы. Веб парақтар беттеулеріндегі (верстка) танымал мүмкіндіктердің бірі, браузер терезесінің шетінде кескін орналасқан, ал мәтін оның басқа жақтарында айнала орналасқан осы кескіннің мәтінмен ағуы қолданылады

Ағуды құру үшін бірнеше әдістер бар, олар НТМL тегтерімен байланысқан сияқты стильдерді қолданумен де байланысады.

Align mega IMG параметрін қолдану.Кескінді түзету Align mega IMG параметірі мен анықталады. Бұл параметр қай терезенің жанында сурет орналасатындығын береді, және сол кезде анықтай отырып мәтінің ағу әдісін бірге қарастырады. Оң жақ шеті бойынша кескінді тузету және сол жақ бойынша ағуды беру үшін right мәнін және сәйкесінше оған қарама қарсы left мәнін орнатады. Олар ағатын мәтінен кескінге дейінгі ара қашықтықты анықтайды. Бұл атрибуттарсыз кескін мен мәтін бір – біріне тым жабысып тұратындығы 5 мысалда көрсетілген.

5 мысал. Кескін қасиеттерін қолдану.

<html>

<body>

<img src=sample.gif width=50 height=50 hspace=10 vspace=10 align=left>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </body>

</html>

Кескінен мәтінге дейінгі қашықтық hspace параметірімен басқарылады, ол бір уақытта кескіннен солға және оңға бос орынды қосады. Соңдықтан терезе шетінен көрсетілген осы атрибут арқылы сурет мәні тұрғызылады. Осы ерекшеліктен құтылу үшін кестені қолдануға болады.

Кестелерді қолдану.Шекаралары көрінбейтін кесте – беттеудің танымал әдістерінің бірі болып табылады. Ізделінді нәтижені алу үшін кескіндегідей мәні мен қолданысы бар TABLE тегінің align қасиеттерін пайдаланамыз. Бірақ кестелерді көрсету үшін және басқару үшін параметірлер көбірек екен, бұл мәтінің ағуы бойынша кескінмен салыстырғанда артықшылық сипатында болып отыр[9].

6 мысал. Кестелерді қолдану.

<table width=70 height=70 border=0 align=left cellpadding=0 cellspacing=0>

<tr>

<td><img src=sample.gif width=50 height=50></td>

</tr>

</table>

Кесте кескінің өзінен шығатын көрінбейтін шекараны құрады, ол мәтінге жақындауға жол бермейді. Шегініс кестенің ені және биіктігімен анықталады. Мысалда сурет сол жақ шеті бойынша түзетілген, себебі бұл әдіс кестеге орнатылған. Суреттен мәтінге дейінгі көлденең ара қашықтық кестенің енімен кескін енінің айырмашылығына тең. Ал тігінен шегініс мүлдем басқаша, үнемдеу бойынша ұяшық құрамындағыларды түзету тігінен ортасы бойынша орындалады. Сондықтан егер, TD тегінің valign=top параметрі берілсе, тігінен бойынша шегіністер көлденеңіненге қарағанда екі есе аз болады.

Стильдерді қолдану. Суреттің мәтінмен ағуы үшін float параметрін қолдануға болады. Right мәні кескінді түзетуді атқарады, яғни браузер терезесінің оң жақ шеті бойынша, ол мәтінді суреттің сол жағына орналастырады. Ал left мәні керісінше сол жақ шеті бойын түзетеді де мәтінді суреттің оң жағынан қояды.

7 мысал. Стильдерді қолдану.

<html>

<body>

<img src=sample.gif width=50 height=50 hspace=10 vspace=10 style="float: left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</body>

</html>

Мәтінді түзету.Мәтінді сыртқы көрінісіне және абзац жақтарына байланысты сол жақ, оң жақ, орталық, ені бойынша түзетеді.Ол 1- кестеде көрсетілген. Сол жақ бойынша түзету кең таралған, мұнда мәтін сол жақтан шетіне дейін жылжиды, ал оң жағы түзетілмейді. Оң және орталық бойынша түзету негізінен тақырыпшаларда қолданылады.

Элементтерді сол жақ бойынша түзету үнсіз келісім бойынша берілген, сондықтан оны қайта берудің қажеті жоқ. Осыдан кейін align=left параметрін енгізу керек.

(тег Р) және (тег DIV) параграфтар арасындағы негізгі айырмашылықтар мынада: параграф басында және соңында вертикаль шегініс пайда болады. Бұл тега DIV жағдайында болмайды.

Стильдерді қолдану.Мәтіндегі сөздер арасындағы қашықтықты жасау үшін word-spacing параметрі қолданылады. Ол пиксельмен (рх), пунктпен (рt), миллиметрмен (mm) және басқа да бірліктермен қойыла алады.

8 мысал. word-spacing атрибутын қолдану

<span style=” word-spacing: 10px”>Піл + жақсы тағам = екі піл</span>

Онда соңғы рет көрсетілген орталық және қолайлы қасиеттері көрсетіледі. Стильді бір рет кесте арқылы сипаттауға және веб-парақтың элементтеріне қолдануға болады. Ол 9 мысалда көрсетілген.

Текстің астын сызуды тудыру. Жіберудегі текстің астын сызу тұрақты болғанына байланысты басқа да безендіру сәйкес келеді. Сайтқа кірушілерді адастырмас үшін жіберетін қарапайым мәтіннің астын сызуды ешқашан қолданбау керек. Бірақ астын сызудың әр түрін қолдануға болады,мысалы, пунктирлі сызықтар түрінде. Бұл үшін border – bottem параметірін қолданатын жаңа стиль шығару керек.Ол мәтіннің астынан сызық шығарады.

Абзацты жасау үшін text-indent параметрлері қолданылады және жолдың алдына ешқандай шегінулер қойылмайды (кесте 2).

Кесте 1

Мәтінді түзету

Сол жақ бойынша түзету	Оң жақ бойынша түзету	Орталық бойынша түзету	Ені бойынша түзету
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

9 мысал. Стильдерді қолдану.

<html>

<head>

<style>

P{ word-spacing: 10px }

</style>

</head>

<body>

<p>-Булочкунадо?</p>

<p>-Спасибо, не надо!</p>

<p>-Не надо?! Спасибо!</p>

</body>

</html>

Контекстік селекторлар.Веб - парақтар құрған кезде бір тегтен кейін қатар екінші тег қолдануға тура келеді. Мысалы, қою текстің стилін ол курсивті болғанда ғана анықтауға болады.Қарапайым селекторларды қолдану[10].

Мысалда, жіберілетін стиль құрылады, онда тышқан тетігімен басылған тектің асты пунктирлі көк сызықты құрайды. Контекстік селекторлар пробелмен ажыратылған жай селекторлардан тұрады. Адрес алдындағы кері флэш, адрестің сайттан басталатынын білдіреді. Сілтеме images папкасындағы pic.gif суретіне берілген. Ал ол сайтта орналасқан .

Кесте 2

Мәтіндермен жұмыс

HTML коды	Мағынасы	Мысал
<p>мәтін</p>	Сол жақ бойынша түзетілген жаңа параграфты үнсіз келісім бойынша қосады. Параграф алдында автоматты түрде бос жорл қосылады.	Мәтін
<p align=left>мәтін</p>	Сол жақ бойынша түзету	Мәтін
< p align=right> мәтін</p>	Оң жақ бойынша түзету	Мәтін
<p align=center> мәтін</p>	Орталық бойынша түзету	Мәтін
<p align=justify> мәтін</p>	Ені бойынша түзету	Ені бойынша мәтін
<nobr> мәтін</nobr>	Егер мәтін браузер терезесінен үлкен болса, онда жолдардың автоматты ауысуын өшіреді.	Мәтін
мәтін<wbr>	Егер NOBR тег. қолданылса, браузердің белгіленген жеріне жолдарды ауыстыруға мүмкіндік береді.	Мәтін
<center> мәтін</center>	Орталық бойынша түзету	Мәтін
<div align= center> мәтін</div>	Орталық бойынша түзету	Мәтін
<div align=left>мәтін</div>	Сол жақ бойынша түзету	Мәтін
<div align= right > мәтін</div>	Оң жақ бойынша түзету	Мәтін
<div align=justify> мәтін</div>	Ені бойынша түзету	Ені бойынша мәтін

10 мысал. Пунктирлі сызықты жіберуді қабылдау.

<html>

<head>

<style>A {color: #FF0000;}

A:visited {color: #666666;}

A:hover { text-decoration: none; border-bottom: 1px dashed blue; }

</style>

</head>

<body>

<a href=1.html>Подчеркнутаяссылка</a>

</body>

</html>

B { font-family: Arial; font-weight: bold; color: navy; }

I { font-style: italic; }

B I { font-family: Arial; font-weight: bold; color: navy; font-style: italic; }

Мысалдағы курсивті қою Arial шрифті көк түсті І тегіне қатысты болады егер ол В тегінің ішінде болса.

11 мысал. Контекстік селекторлар

<html>

<head>

<style type="text/css">

B { font-weight: bold; }

I { font-style: italic; }

B I { font-family: Arial; font-weight: bold; color: navy; font-style: italic; }

</style>

</head>

<body>

<b>Жирный шрифт</b><br>

<i>Курсивный текст</i><br>

<b><i>Жирный курсивный текст</i></b><br>

<i><b>Курсивный и жирный текст</b></i>

</body>

</html>

11 мысал. Контекстік селекторлар

Жирный шрифт Курсивный текст Жирный курсивный текст Курсивный и жирный текст

Бір мезгілде топтастырылған контестік селекторларды қолдануға болады.

В, І, Н1, Р. Cite {color: navy;}

Мысалдағы көк түс қолданылады:

• В тегінің ішіне орналастырылған І тегінің курсивіне;

• Н1 барлық тегіне;

• Р тегі параграфіндегі Cite класына.

Сілтемелер.Сілтемені қалай жасауға болады?Сілтемені құру үшін браузерге, сілтеме деген не? Сілтеме жасайтын құжат адресін көрсетіп, хабарландыруы керек. Екі әрекеттер де, жалғыз қажет href параметрі бар тега А көмегімен орындалады. Мағынасының орнына (URL) документінің адресі қолданылады. Сілтемені адресі абсолютті және қатысты болуы мүмкін. Абсолютті адрестер, веб-беттері немесе сайт атына байланыссыз, сілтеме жазылған жерде және барлық жерде жұмыс істейді.

12 мысал. Абсолютті сілтемелерді қолдану

<html>

<body>

<a href=www.yandex.ru>Іздейтін жүйе Яндекс</a>

</body>

</html>

Қатысты сілтемелар аты айтып тұрғандай, қандай да бір құжат немесе адреске қатысты құрылады.Мұндай адрестер мысалдары:

/demo/

Бұл екі сілтемелар толық емес деп аталады және веб-серверге сайтта немесе demo папкасында орналасқан index.html файлы болмаса браузер, берілген каталогта бар файлдар мазмұнын көрсетеді.

/ images /pic.gif

Адрес алдындағы кері флэш, адрестің сайттан басталатынын білдіреді. Сілтеме images папкасындағы pic.gif суретіне берілген. Ал ол сайтта орналасқан .

/help/me.html

Атау алдындағы екі нүкте, браузерге сайттағы каталогтар мазмұнындағы жоғары деңгейге өтуін білдіреді.

/manual /info.html

Егер папка атының алдында ешбір белгі болмаса, онда ол осы каталог ішінде орналасқанын білдіреді.

13 мысал.Қатысты сілтемелерді қолдану.

<html>

<body>

<a href=images/xxx.jpg>Посмотрите на мою фотографию!</a><br>

<a href=tip.html>Как сделать такое же фото?</a>

</body>

</html>

Браузер енін анықтау.Кейбір мәселелерде браузер терезесінің оң жағы бойынша қабатты орналастыру талап етіледі. Бірақ, қабат орны пиксельдермен берілгендіктен, оның орналастырылуы үшін браузер терезесі қанша пиксель орын алатындығын білу талап етіледі.

Жұмыс аймағының ені мен биіктігін анықтау үшін браузерлерде әртүрлі қадам қолданылады. Internet Explorer және Opera-да еннің мәні document.body.client Width әдісі арқылы алынады. Биіктігі осыған ұқсас анықталады, тек Width – ол Нeight – қа айналады. Қорытындысында, JavaScript-те жазылған функциялар 1 мысалда көрсетілгендей түрге ие болады[11].

14 мысал.Ені мен биіктігін анықтау үшін функциялар.

<script language="JavaScript">

IE = (document.all);NC = (document.layers);

Opera = (document.getElementById);

function getHeight()

if (IE || Opera) send = document.body.clientHeight;

if (NC) send = window.innerHeight;

return send;

function getWidth()

if (IE || Opera) send = document.body.clientWidth;

if (NC) send = window.innerWidth;

return send;

</script>

Келтірілген функцияларды қолдану үшін, бастапқыда абсолютті орналастырылуы бар қабат құру қажет.

15 мысал.Қабат құру.

<div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1">

<table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=#000000 cellspacing=0>

<tr>

<td>Содержание</td>

</table>

</div>

Қабат орны z-индекс парметрімен анықталады. Қалған мәтіннің үстіне қабатты орналастыру үшін, оның мәнін 0-ден үлкен оң мәнмен берген дұрыс. Егер қабатты мәтіннен төмен орналастыру керек болса –теріс мән пайдаланылады.

Қабаттың мәнін оң жақ бұрышқа қою үшін, putlayer функциясын жазамыз.16 мысал.Браузерлердің оң жақ бұрышында қабатты орналастыруды беру.

span class="select">function putLayer() {

widthBrowser = getWidth() - 100;

if(IE) eval('document.all["xyz"].style.left = widthBrowser');

if(NC) eval('document.layers["xyz"].left = widthBrowser');

if(Opera) eval('document.getElementById("xyz").style.left = widthBrowser');

setTimeout('putLayer()', 1000);

}

Қабаттың орны сол жақ жоғарғы бұрышта болғандықтан, жұмыс аймағының енінен қабат енін алып тастау керек (мысалда – 100пиксель). Егер қабат браузер терезесінің төменгі бұрышында орналасса, биіктігімен де солай жасаймыз.

Берілген қабат көрсетілген орында қалуы үшін және өз орнын әр қашанда өзгертпеуі үшін яғни терезе өзгергенде SetTimeout функциясы қолданылады, ол әр 1000 миллисекундта қабат орнын қалпына келтіреді (немесе 1 секунд).

16 мысалда көрсетілген функцияны шақыру үшін әртүрлі оқиға қолдануға болады, мысалы On load оқиғасын.

17 мысал.Функцияны автоматты түрде шақыру.

<body onLoad="putLayer()">

...

</body>

Браузердің кез-келген бұрыштарында қабатты орналастырудың толық листингін келтірейік

Жоғарғы оң жақ бұрышта

<html>

<head><script language="JavaScript">

IE = (document.all);

NC = (document.layers);

Opera = (document.getElementById);

function getHeight() {

if (IE || Opera) send = document.body.clientHeight;

if (NC) send = window.innerHeight;

return send;

}

function getWidth() {

if (IE || Opera) send = document.body.clientWidth;

if (NC) send = window.innerWidth;

return send;

}

function putLayer() {

widthBrowser = getWidth() - 100;

if(IE) eval('document.all["xyz"].style.left = widthBrowser');

if(NC) eval('document.layers["xyz"].left = widthBrowser');

if(Opera) eval('document.getElementById("xyz").style.left = widthBrowser');

setTimeout('putLayer()',1000);

}

</script>

</head>

<body onLoad="putLayer()">

<div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1">

<table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black cellspacing=0>

<tr>

<td>Содержание</td>

</table>

</div>

</body>

</html>

Оң жақ төменгі бұрышта

<html>

<head>

<script language="JavaScript">

function putLayer() {

widthBrowser = getWidth() - 100;

heightBrowser = getHeight() - 200;

if(IE) {

eval('document.all["xyz"].style.left = widthBrowser');

eval('document.all["xyz"].style.top = heightBrowser');}

if(NC) {

eval('document.layers["xyz"].left = widthBrowser');

eval('document.layers["xyz"].top = heightBrowser');}

if(Opera) {

eval('document.getElementById("xyz").style.left = widthBrowser');

eval('document.getElementById("xyz").style.top = heightBrowser');}

setTimeout('putLayer()',1000);}

</script>

</head>

<body onLoad="putLayer()">

<div id=xyz style="position: absolute; top: 0px; width: 100px; z-index: 1">

<table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black cellspacing=0>

<tr>

<td>Содержание</td>

</table>

</div>

</body>

</html>

Сол жақ төменгі бұрышта

<html>

<head><script language="JavaScript">

function putLayer() {

heightBrowser = getHeight() - 200;

if(IE) eval('document.all["xyz"].style.top = heightBrowser');

if(NC) eval('document.layers["xyz"].top = heightBrowser');

if(Opera) eval('document.getElementById("xyz").style.top = heightBrowser');

setTimeout('putLayer()',1000);}

</script>

</head>

<body onLoad="putLayer()">

<div id=xyz style="position: absolute; left: 0px; top: 0px; width: 100px; z-index: 1">

<table bgcolor=#c0c0c0 width=100 height=200 border=1 bordercolor=black cellspacing=0>

<tr>

<td>Содержание</td>

</table>

</div>

</body>

</html>

Салымдарды құру.Салымдар новигация элементінің бірі, сайтты қолданушы салымдарға кез келген керекті түр, функцияны шығынсыз дизайнерін беруді ұнатады. Қосымша, бұл элемент веб-парақта жақсы анықталады және Салымдардың сайт бөлімдері арқылы өтуін тез түсіндіреді. 1суретте салым құрудың бір нұсқасы көрсетілген[12].

Сурет 1. Салымдарды құрып орналастыру

Графикалық салымдарды кез келген графикалық редакторда құруға болады. Сілтемелер карт-бейненің көмегімен суреттерден алынған фрагменттермен жасалынады. Біз бірақ салымдарды қарапайым құралдармен жасаймыз.

Салымдарды құру үшін кестенің алты ұяшығы керек, оның төртеуі салымды құрайды, ал шеткі екі ұяшығы сән үшін керек, олар көлденең шетке шегіну сызығы үшін керек.

Екі селектр қажет: біріншісі ағымдағы салымды өзгертеді, оны open дейік, ал екіншісі closе белсенді емес салымдарды басқару үшін қажет. Жақтаушы атрибут border көмегімен жасалады, ол бір мезгілде жақтаушы стилін, оның қалыңдығын, түсін береді. Қосылған екі ұяшықта қос жақтаушы болмас үшін оң жақтағы шекараны алып тастау керек. Бұл үшін border-right: none параметрі қолданылады. Сондай-ақ ағымдағы салым үшін төменгі шекараны жасырып қою керек. Оң және сол ұяшықтың стилін тура сипаттауға болады. Бірақ сайтта салымды көп қолдану үшін бөлек класс қолданған дұрыс.

18 мысал.Кестені қолдану

<html>

<head>

<style>

.open { border: solid 1px black; border-right: none; border-bottom: none; text-align: center; font-weight: bold;}

.close { border: solid 1px black; border-right: none; text-align: center; background: #CFD6D4; }

</style>

</head>

<body>

<table width=100% border=0 cellspacing=0 cellpadding=4>

<tr>

<td width=10 align=center style="border-bottom: solid 1px black"> </td>

<td width=25% class=open>1</td>

<td width=25% class=close>2</td>

<td width=25% class=close>3</td>

<td width=25% class=close>4</td>

<td width=10 align=center style="border-left: solid 1px black; border-bottom: solid 1px black"> </td>

</tr>

</table>

</body>

</html>

Кестені қолданудың бірнеше ерекшелігі бар. Терезе көлемін өзгерту кезінде кесте ені бойынша құрылады. Сондықтан салымдар әрқашан көрінеді және міндетті түрде көлденеңінен орналасады. Сондай-ақ кестені қолданбай span немесе div тегасын қолдануға болады. Бірақ бұл жағдайда браузер терезелерінің кішірейгенін көруге болады. 19 мысалда span тегасы қолданылады, оның көмегімен салымдар жасалынады. Әр түрлі блоктар бір бірімен араласып кетпес үшін кодты бір жолға жазған дұрыс.

19 мысал. SPAN тегін қолдану

<style>

.open { border: solid 1px black; border-right: none; border-bottom: solid 1px white; text-align: center; font-weight: bold; width: 24%; padding: 4px}

.close { border: solid 1px black; border-right: none; text-align: center; background: #CFD6D4; width: 24%; padding: 4px }

</style>

<span style="border-bottom: solid 1px black; width: 10px"> </span>

<span class=open>1</span>

<span class=close>2</span>

<span class=close>3</span>

<span class=close>4</span>

<span style="border-left: solid 1px black; border-bottom: solid 1px black; width: 10px; padding: 4px"> </span>

Әр түрлі жақтаушыны және түсті қолдана отырып, әр түрлі салымдарды құруға болады, түгенделген салымның мысалы, бұл жағдайда белсенді салым түспен белгіленеді, ал қалғаны белгіленбейді.

20 мысалда осындай салымның жасалған коды көрсетілген. Бұл жағдайда қайтадан кесте қолданылады.

20 мысал.Салымдарды кесте арқылы құру

<html>

<head>

<style>

.open { border: solid 1px black; border-right: none; border-bottom: none; font-weight: bold; text-align: center; background: #CFD6D4; padding: 4px }

.close { border: solid 1px black; border-right: none; text-align: center; padding: 4px}

</style>

</head>

<body>

<table width=100% border=0 cellspacing=0 cellpadding=4>

<tr>

<td width=10 align=center style="border-bottom: solid 1px black"> </td>

<td width=25% class=open>1</td>

<td width=25% class=close>2</td>

<td width=25% class=close>3</td>

<td width=25% class=close>4</td>

<td width=10 align=center style="border-left: solid 1px black; border-bottom: solid 1px black"> </td>

</tr>

<tr>

<td bgcolor="#CFD6D4" colspan="6" height=10></td>

</tr>

</table>

</body>

</html>

Кестенің түрі 18 мысалдағындай, тек қана жаңа жол қосылады. Ол қоңыр сызықты форматтайды. Оның ені мен түсі height және bgcolor ұяшықтарының ерекшелігімен ауысады.

Декоративтік жақтау. Керекті жақтауды жасау үшін оны қажетті түрде қандайда бір графикалық редакторда ұқсатып салу керек. Мысалы, 3 кестеде домалақ бұрыштары бар жақтау көрсетілген.Содан кейін 9 күлгін сары сызықтармен және номерлермен белгіленген суретті 9 бөлікке бөлеміз. Мысалы, бейнені ImageReady немесе соған ұқсас программаларда бөлуге болады.

Кестеде borden,cellspacing және cellspadding параметрлері нольге тең болуы керек, әйтпесе сызықтар өзара байланыспайды.

IMG тектерінің көмегімен бұрыштарын қарапайым суреттер сияқты қоямыз, ал горизонтальді және вертикальді сызықтарды background параметрлері мен кесте ұяшықтары фонының көмегі арқылы беруге болады. Бұл біздің жақтауымыздың көлемін үлкейтеді және өлшемін мазмұнына байланысты өзгертеді.Сызықтар бір – біріне тақасып тұрып араларында бос сызық болмау үшін міндетті түрде ұяшықтар мен суреттердің өлшемдерін көрсету керек.

Кесте 3

Декоративтік жақтау

Сурет	Орналасуы	Файылдың аты
	Сол жақ жорғарғы бұрыш	1.gif
	Көлденен сызық	2.gif
	Оң жақ жоғарғы бұрыш	3.gif
	Сол жақ тік сызық	4.gif
	Оң жақ тік сызық	6.gif
	Төменгі сол жақ бұрыш	7.gif
	Төменгі сызық	8.gif
	Оң жақ төменгі бұрыш	9.gif

21 мысал. Декоративті жақтау құру

<table width=400 border=0 cellspacing=0 cellpadding=0>

<tr>

<td height=13><img src=1.gif width=12 height=13></td>

<td background=2.gif height=13><img src=1x1.gif height=13></td>

<td height=13><img src=3.gif width=14 height=13></td>

</tr>

<tr>

<td background=4.gif width=12> </td>

<td align=center>Содержимое</td>

<td background=6.gif width=12> </td>

</tr>

<tr>

<td height=13><img src=7.gif width=12 height=13></td>

<td background=8.gif><img src=1x1.gif height=13 width=1></td>

<td height=13><img src=9.gif width=14 height=13></td>

</tr>

</table>

Ұяшықтарда горизонтальді және вертикальді сызықтар фон болып орналасса, распорканы міндетті түрде орналастыру керек – бұл немесе бос сызық, әлде өлшемі 1 де 1 пиксель (мысалда файл 1 х 1 gif деп аталады) GIF форматындағы мөлдір сурет. Бұл Netscape – ні алдау үшін жасалады, өйткені ол бос ұяшықтың мазмұнын көрсетпейді.Келтірілген тәсіл әр түрлі рамкалардың түрін құруға көмектеседі.

Стильдердің қолданылуы. Стильдің көмегімен рамканы әрбір блоктік тектерге қолдануға болады, мысалы, парагрфке (Р тек), Кесте мен тектерге DIV. Стильдер рамканы жеңіл және қолайлы етіп жасайды, Кестелерді қолданғанша 2 суретте көрсетілгендей әр түрлі рамкаларды ұсынады[13].

Сурет 2. Стиль арқылы жасалған рамкалардың түрі.

Бірінші орналасқан екі рамка – dottet және dashed тек қана жоғарғы Netscape және Internet Explorer браузерлары арқылы қолданылады.Жақтау border параметрі арқылы оның түрі, қалыңдығы және түсі беріледі.

22 мысал. Стильдерді қолдану

<html>

<head>

<style type="text/css">

P { border: double 4px #336699; padding: 5px}

</style>

</head>

<body>

<p>При работе на вычислительной технике необходимо сесть так, чтобы руки с предплечьями образовывали прямой угол, глаза поставить на расстояние 30-40 см от рабочей поверхности монитора.

</p>

</body>

</html>

Мысалда екі қабатты рамка қолданылады., қалыңдығы сызықтардың қалыңдығынан және олардың арасындағы ара қашықтықтан құралады. Рамка текске тимес үшін рамкадан radding параметірінің мазмұнына отступ берілген.

Ескерту. Netscape 4х браузері Кестеларға арналған рамкаларды қосады және мазмұнымен оның енін шектейді.Жақтаудың ішін қоршалған ақпарат, Веб – беттерінде бір материалдан басқа оқырман назарын аударады. Сайтты көркемдегенде жақтау өзінің әсемдігін көрсетеді.

Cellspacing және bgcolor кестелерінің параметрлерінің қолданылуы. Браузерлар жақтауларды бірдей көрсетпеуі үшін, bgcolor және cellspacing Кестелар құрылымымен байланыстырып шығу тәсілін қолдануға болады. Bgcolor параметрі арқылы барлық Кесте жақтаудың түсімен сәйкес түске боялады. Ұяшықтың ішкі фонына түс беру керек, мысалы, ақ. Ұяшықтардың өлшемі кестелердің өлшемінен аз, осындай айырмашылықтардан көрінетін ішнара болады. Ұяшықтардың ара қашықтығы ұяшық өлшемін кіші өлшемге cellspacing кестесінің параметірінен басқартады (23 мысал).

23 – мысал. bgcolor параметірінің қолданылуы.

<table cellpadding=6 cellspacing=1 border=0 width=100 height=100 bgcolor=#000000>

<tr>

<td bgcolor=#ffffff>

<table>

<tr>

<td>Содержимое</td>

</tr>

</table>

</td>

</tr>

</table>

Cellspacing параметірінің мағынасын, өзгертуін, рамканың қалыңдығын өзгертуге болады. Ал шектің соңынан мазмұнға – cellpadding параметрі.

Орналастырылған кестелер.Әртүрлі браузерлерде бірдей жұмыс істейтін қарапайым және универсалды жақтауды құру тәсілдері, 2 кестенің бір біріне қойылуы. Егер біз тікбұрышты алсақ, мысалы, қызыл қағаздай және оның үстіне тағы бір кіші өлшеуіштегі ақ тіктөртбұрышты алсақ, онда қызыл рамканы көреміз.Бет қағаздың орнына TABLE тегін қолданамыз, ал Кестенің түсін bgcolor параметірімен анықтаймыз (24 мысал)[14].

24 – мысал. Орналастырылған кестелерді қолдану.

<table width=300 height=300 border=0 cellspacing=0 cellpadding=1 bgcolor=#FF0000>

<tr>

<td><table border=0 cellspacing=0 cellpadding=10 bgcolor=#FFFFFF width=300 height=300>

<tr>

<td align=center>Содержимое</td>

</tr>

</table>

</td>

</tr>

</table>

Үстіңгі кестеде ені мен ұзындығын қажетіне қарай орналастырамыз, bgcolor параметірімен рамканың түсін анықтаймыз,cellpadding – ті 0 – ге қабыстырамыз, ал cellpadding шекараның қалыңдығын басқарады. Параметрі үлкен болған сайын, жақтау да соғұрлым қалың болады.

Ішкі кесте үшін арнайы түс беру керек, сыртқы түстен жақсы, Веб бетінің түсімен сәйкес, мысалы, ақ түс берілген. Cellspacing немесе cellpading параметрлері (қайсысын қолдансада айырмашылығы жоқ) рамкалар шекарасынан кестелар мазмұнының қашықтығын анықтайды.

Ішкі кестенің ені мен ұзындығы сыртқы кестенің ені мен ұзындығына сәйкес келуі керек.

Ескерту. Жолдар автоматты түрде үзік сызықты қосады. Егер жақтау кейбір жерлерде ойлағаннан қалың болса, онда тектерінен және сол жолдардың саны арасындағы артық үздік сызықтарды алып тастау керек

Жақтаулардың ерекшелігі.Netscape және Internet Explorer браузерлері фреймдар арасындағы жақтауларды анықтау үшін түрлі қадамдар қолдануда. Netscape-дегі frameborder параметрі Yes немесе No мағынасын қабылдай алады, ол тек IE-де сандарды қолдануға болады. Фреймдер арасындағы қоршауны алып тастау үшін келесі кодты пайдалануға болады.

25 мысал. Фреймдар арасындағы жоқ жақтау

<frameset cols=200,* frameborder=no frameborder=0>

<frame src=menu.html name=MENU noresize>

<frame src=content.html name=CONTENT>

</frameset>

Мысалда frameborder параметрі браузер өзіне мағына таңдап алу үшін 2 рет қолданылады. Жалпы бір ғана мағына frameborder=0 параметрімен шектеуге болады. Netscape үшін мұндай жазу ереже бұзуға жатады, бірақ бұл жағдай тура қабылданады. Opera браузері өкінішке орай фреймдерді тек қоршаумен ғана шығарады.

Егер қоршау ақырында керек болса, браузерде ол еш параметрлерді енгізбей-ақ келісім бойынша салынады. Сонымен қатар FRAMESET және FRAME тегтерінде қолданылатын bordercolor параметрінің көмегімен қоршауның түсін енгізуге болады. Түс өзінің атымен немесе он алтылық мағынасы бойынша көрсетіледі.

26 мысал. Жақтау түсінің өзгеруі

<frameset cols=200,* bordercolor=navy>

<frame src=menu.html name=MENU noresize>

<frame src=content.html name=CONTENT>

</frameset>

Мысалда қоршау Netscape неммесе Internet Explorer браузерлерінде түрі бойынша ерекшеленетін көк түсті болады.

Жаңа терезеледі құру.Динамикалық HTML түрлі мақсаттар үшін жаңа терезелер құруға мүмкіндік береді. Java Script көмегімен құрылған мұндай терезелер стандартты түрде болады және типі бойынша диалогты және қарапайым болып бөлінеді. Диалогты немесе модальды терезелер барлық скриптілер қызметін тоқтатады және қолданушыдан кез келген батырманы басуды немесе терезені жабуды күтеді. Қарапайымдары программа қосылатын ағымдағы терезеден тәуелсіз жұмыс істейді.

Диалогтік терезелер.Диалогтік терезелерді құрудың төрт әдісі бар, олар төмендегі 4 кестеде келтірілген.

Alert және confirm әдістері бірнеше жолды шығаруға мүмкіндік береді. Мәтінді басқа жолға ауыстыру үшін символ қолданылады. Prompt әдісі сұраныс мәтінінде екіден аспайтын жолды береді.

Жеке диалогты терезелерді құру.ShowModalDialog әдісінің көмегімен өз қалауыңыз бойынша терезелерді құруға болады. Қарапайымдары программа қосылатын ағымдағы терезеден тәуелсіз жұмыс істейді.

Java Script көмегімен құрылған мұндай терезелер стандартты түрде болады және типі бойынша диалогты және қарапайым болып бөлінеді[15].

Кесте 4

Диалогтік терезелер

Әдіс	Сипаттама	Түрі	Мысал
alert	Мәтінді шығарады және ОК батырмасын басуды күтеді. Қателік туралы хабарлама шығару мүмкіндігі бар.		alert("Hello, world!")
confirm	Alert-ке ұқсас, бірақ екі батырманы ОК және Cancel шығарады. Сұрақ қоюға қолданылады. При нажатии на ОК басқанда true мәнін, ал Cancel батырмасы false мәнін қайтарады.		if( confirm ("Бәрін өшіреміз бе? Сенімдісіз бе?")) alert ("Өшіреміз...") else alert ("Ал қажет пе...");
prompt	Енгізу жолын сұрайды.		n = prompt ("Атыңызды енгізіңіз:", defaultText="") if (n) alert ("Аты: " + n)

Мұндай терезелер келесі ерекшеліктерге ие:

• навигация батырмалары болмайды;

• тышқанның оң жақ батырмасы жұмыс істемейді;

• мазмұнын ерекшелеуге болмайды.

Әдісті шақыру синтаксисі келесідей: Қайтарылар мән = showModalDialog("URL", "терезенің аты ", "параметрлері").URL диалогтік терезеде ашылатын HTML-құжатқа апарар жолды көрсетеді. Аты ашылатын терезенің шартты атауын білдіреді, оны жібере салуға болады.

Терезелер түрін басқару параметрлері келесідей болуы мүмкін.Ол 5 кестеде көрсетілген.

Аталған параметрлер үтір арқылы кез келген рет бойынша жүре береді. Диалогтік терезенің өлшемі 100х100 пиксельден кем болмайды және оны экраннан тыс жерге орналастыру мүмкін емес. Параметрдің қосылуын немесе өшуін оларда yes немесе no (1 немесе 0) мәндерін көрсету арқылы анықталады. Мысалы, center=yes параметрі мағынасы center=1 параметрімен бірдей.

Кесте 5

Терезелер түрін басқару параметрлері

Параметр	Мағынасы	Сипаттамасы
border	Thick | thin	Терезе қоршаусының қалыңдығын енгізеді
center	yes | no немесе 1 | 0	Терезені монитор экранының ортасы бойыншы теңестіреді
dialogHeight	px, %...	Диалогтік терезенің биіктігі
dialogLeft	px, %...	Горизонталь бойынша жоғарғы сол жақ бұрыштың орналасу қалпын енгізеді
dialogTop	px, %...	Вертикаль бойынша сол жақ жоғарғы бұрыштың орналасу қалпын енгізеді
dialogWidth	px, %...	Диалогтік терезенің ені
maximize	yes | no немесе 1 | 0	Бастау жолына "Развернуть" батырмасын қосады
minimize	yes | no немесе 1 | 0	Бастау жолына "Свернуть" батырмасын қосады

27 мысал. Диалогтік терезе құру

<script language="JavaScript">

showModalDialog("tips.html","","dialogWidth=350px, dialogHeight=200px")

</script>

Мысалда tips.html файлы жүктелетін 350х200 өлшемді терезе құрылады.

Қалқымалы терезелер құру.Қалқымалы терезелер window объектісінің көмегімен құрылатын браузердің қарапайым терезесі болып табылады. Сонымен қатар бұл терезе түрін өлшемдерін енгізе отырып және түрлі элементтерін өшіре отырып басқаруға болады.

Терезені құру үшін келесі синтаксиспен келетін open әдісі қолданылады.

window.open("URL", "терезе аты", "параметрлері")

Параметрлердің мәні модальдік терезесін құруға арналған showModalDialog әдісінің параметрлерімен сәйкес келеді.

Бұл терезе түрін басқаратын параметрлердің диалогтік терезе элементтерінен кейбір ерекшеліктері бар.Ол 6 кестеде көрсетілген[16].

Кесте 6

Қалқымалы терезелер құру параметрлері

Параметр	Мағынасы	Сипаттамасы
directories	yes | no немесе 1 | 0	Сілтемелер панелін бейнелейді
location	yes | no немесе 1 | 0	Мекен-жай жолын бейнелейді
menubar	yes | no немесе 1 | 0	Мәзірді бейнелейді
scrollbars	yes | no немесе 1 | 0	Айналдыру жолағын көрсетеді
toolbar	yes | no немесе 1 | 0	Құралдар панеліндегі батырмаларды көрсетеді
status	yes | no немесе 1 | 0	Қалып-күй жолын көрсетеді
rersizible	yes | no немесе 1 | 0	Терезе өлшемін өзгертуге бола ма соны анықтайды
left	пиксельдер	Горизонталь бойынша жоғарғы сол жақ бұрыштың орналасу қалпын енгізеді
top	пиксельдер	Вертикаль бойынша сол жақ жоғарғы бұрыштың орналасу қалпын енгізеді
width	пиксельдер	Терезенің ені
height	пиксельдер	Терезенің биіктігі

Төменде айналдыру жолағысыз, мәзірсіз, навигация жолдарысыз және т.б. терезені құру мысалы көрсетілген.

28 мысал. Жаңа терезе құру

<script language="JavaScript">

window.open("help.html", "help", "width=350, height=200, status=0, menubar=0, location=0 resizable=0 directories=0 toolbar=0")

</script>

Терезе түрін басқару параметрлерін үтір арқылы кез келген ретпен қолдануға болады.

Терезені жабу. Егер терезе динамикалық түрде скрипт көмегімен жасалса, оны кез келген сәтте close әдісімен жабуға болады.

29 мысал.Терезені жабу

<script language="JavaScript">

help = window.open("help.html", "help", "width=350, height=200, status=0, menubar=0, location=0 resizable=0 directories=0 toolbar=0")

</script>

<a href="javascript:help.close()">Терезені жабу</a>

Мысалдағы help айнымалысы қайта құрылған терезеге сілтеме болып табылады, сол себепті жабу help.close() әдісі арқылы жүреді.

Жасырын өріс.Жасырын өріс көрсетілмейді және өзінің құрамын қолданушыдан жасырады. Қолданушы оған ештеме енгізе алмайды немесе басып шығара алмайды. Жасырын аймақты құру мақсаты – серверге техникалық ақпаратты жіберу. Көптеген жағдайларда берілген формаларды парақтан параққа жіберу үшін қажет (сурет 3).

Жасырын өрісті құру синтаксисі:

<input type=hidden name=... value=...>

name – программаға аймақты индентификациалауға мүмкіндік беретін аймақ аты.

value – аймақтың мағынасы серверге қандай ақпарат жіберілетінін анықтайды.

Мысалы. Жасырын аймақты қолдану

<html>

<head>

<body>

<form action=”/cgi-bin/handler.cgi” method=POST>

<b>Сүйікті сөзіңізді жазыңыз (серверге ешқандай ақпарат жіберілмейді!):</b><br>

<input type=hidden name=UserName value=Vasya>

<input type=hidden name=password value=pupkin><br>

<input type=submit>

</form>

</body>

</html>

Жақсы көретін сөз:

Сурет 3. Жасырын аймақты қолдану

Мысалда жасырын аймақ ешқандай көрсетілмейді, бірақ форма серверге жөнелтілгенде жасырын өрістер онымен бірге жіберіледі.

Жылжымалы фреймдер.Internet Explorer браузерлердің үшінші және одан жоғарғы версиясы жылжымалы фреймдерді IFRAME тегі көмегімен қолдануға мүмкіндік береді. Жылжымалы фрейм қарапайым құжат ішінде болады және басқа да кез келген құжаттар бетіне қойылады. IFRAME тегінде де қарапайым фреймдегідей параметрлер: width, height, hspace, vsace, align мәні IMG тег параметріне сәйкес келеді[17].

Мысалы, жылжымалы фреймді пайдалану

<iframe src=banner.html width=468 height=60 hspace=10 vspace=10 align=center>

</iframe> IFRAME тегі контейнері болып табылады. Бұндай браузерге балама мәтінді көрсетуге, қолданушы көріп отыруына болады. Ол <iframe> және <iframe> тег арасында орналасуы керек.Келтірілген мысалда « Сіздің браузеріңіз жылжымалы фреймді қолдамайды» деген мәтін көрсетеді. IE –ден басқа Opera 6, Netscape 7 және Mozilla браузерінде жылжымалы фреймде қолданылады.