УМКД

Құжат бетінің тегі

«WEB-технологиясы»

пәнінен оқу-әдістемелік кешен

050703 – «Ақпараттық жүйелер» мамандығына арналған

ОҚУ-ӘДІСТЕМЕЛІК МАТЕРИАЛДАР

Семей
2013

мазмұны

1. Глоссарий

2. Дәрістер

3. Практикалық және зертханалық сабақтар

4. Студенттің өздік жұмысы

1. глоссарий

Бұл ОӘМ-да келесі терминдер және оларға түсініктемелер қолданылған:

1. Веб-технологиялар – Интернет желісін қолданып пайдаланушылармен бірге
жұмыс істеуді ұйымдастыру есептерін шешудің техникалық,
коммуникациялық, программалық әдістер кешені.
Контент – веб-беттерде орналастырылған ақпараттар.
2. URI беттер– Интернет желісіндегі беттің уникалды адресі.
3. Интернет сөзі Interconnected networks (байланысқан жүйелер)
терминінен шыққан, яғни техникалық көзқараспен – бұл кіші және ірі
желілер бірлестіктері.
4. ҒТР-сервер деп FТР арқылы қызмет ететін арнаулы программасы бар желіге
қосылған компьютер аталады
5. Әдістеме –мәселелерді шешу әдістерінің жиынтығы.
6. Принцип – бұл ереже. Принциптер жиі шексіздіктер мен талаптар түрінде
көрсетіледі.

2. Дәрістер

Дәріс сабағының құрылымы:

Дәріс №1. Web-технологияларға кіріспе

• Web-технологиялар

• Ерекшеліктері
• Артықшылыұқтары
Негізі Web, Веб, Internet, Интернет – сөздерін синоним деп те
қарастыруға болады.
Веб-технологиялар – Интернет желісін қолданып пайдаланушылармен бірге
жұмыс істеуді ұйымдастыру есептерін шешудің техникалық, коммуникациялық,
программалық әдістер кешені.
Анықтама. Контент – веб-беттерде орналастырылған ақпараттар.
Анықтама2. URI беттер– Интернет желісіндегі беттің уникалды адресі.
Мысал: http://www.yandex.ru/all_services.html
URI –ға енеді:
1. Ресурсқа қол жеткізу әдісі, яғни хаттамасы (http).
2. Ресурстың желілік адресі(www.yandex.ru).
3. Сервердегі файлдың толық жолы (all_services.html).

Ерекшеліктері

Web-технологиялардың өзін ақпаратпен жұмыс істеу концепциясы деп алуға
болады. Оның мынадай ерекшеліктерін бөліп қарастыруға болады:
• Web-технологиялардың техникалық негізі – локальды және глобальды
желілер, көбіне Интернет
• Клиенттердің ерекше типін пайдалану: web-браузерлер ( браузерлердің
типі мен тарихы, қазіргі жағдайын өздігінен оқуға беремін. P.S.
Гульмира Жумагалиевна)
• Ақпараттық көздердегі өзгерістер публикацияларда бірден бейнелене
алады;
• ақпаратты тұтынушылар саны шектеусіз;
• публикацияларда басқа публикацияларға берілген сілтемелер орны мен
материалдар көзіне тәуелсіз түрде беріле алады;
• іздеу машиналардың белсенді жұмысы (іздеу машиналардың тарихы, рөлі
мен қазіргі жағдайын өздігінен оқуға беремін. P.S. Гульмира
Жумагалиевна);
• контентті беру мен тираждау тегін.

Артықшылықтары

Web-технологиялар ақпаратты жеткізу құралы ретінде адам мен компьютер
арасындағы әмбебап интерфейс болып табылады. Әр адамға жазбалар,
тақырыпшалар, сілтемелер мен картинкалар ұғынықты. Веб-интерфейс ақпаратты
алу құралы ретінде түсінікті. Интернеттің коммуникациялық арна ретінде кең
ауқымды пайдаланылуы веб интерфейстің қарапайым екендігін көрсететіні
даусыз. Браузер – веб-беттерді көруге арналған программа. Браузерлер –
казіргі компьютерлер жабдықталған проограммалар. Кең тараған браузерлер:
Internet Explorer, Firefox, Opera, Safari, Chrome.

Дәріс №2-4. «Жүйе» терминінің түсінігі. Клиент-сервер архитектурасы.
Провайдерлер және олардың жүйелері.
• «Жүйе» терминінің түсінігі
• Компьютер-серверлер және компьютер-клиент
• Қосымша-серверлер және қосымша-клиенттер
• Провайдерлер және олардың желілері
• Провайдерлердің желілерін біріктіру
Интернет сөзі Interconnected networks (байланысқан жүйелер) терминінен
шыққан, яғни техникалық көзқараспен – бұл кіші және ірі желілер
бірлестіктері. Кең мағынасында — бұл бір бірімен мәліметтермен алмасатын
жер жүзіндегі миллиондаған компьютерлер арасында бөлінген ақпараттық
кеңістік. Көбіне Интернет сөзімен Желінің информациялық құрамын түсінеді.
Интернет – бұл өзіне уникальды жетістіктерді толығымен жинаған технология.
Интернет сонымен қатар ең күшті және тәуелсіз ақпарат қоры, байланыстың
сенімді және оперативті тәсілі, жер жүзіндегі миллиондаған адамдардың
шығармашылық түрде өзін-өзі көрсету және ақпараттық технологияларды дамыту
негізі болып табылады.Интернеттің басты тапсырмасы бұл – әр тәуліктік,
жоғары сенімді байланыс. Интернетке қосылған кез келген екі компьютер
(немесе басқа құрылғылар) бір-бірімен кез келген уақытта хабарласа алады.
Ары қарай “Желі” сөзін қолданғанда Интернет сөзіне синоним ретінде Желімен
интернет арқылы екі компьютерді байланыстыру мүмкіндігін және олардың өзара
байланысын қамтамасыз етуді түсінеміз. Интернетке қосылған әрбір компьютер
– бұл Желінің бір бөлігі.
Компьютер-серверлер және компьютер-клиент
Интернетке қосылған барлық компьютерлерді екі типке бөледі, олар :серверлер
және клиенттер. Бір компьютерде серверді де және клиентті де орнату
мағынасында бөлу онша қатаң жүргізілмейді. Жергілікті компьютерде Web-
сервер орнатылуы мүмкін және осыған қарамастан, дәл осы компьютерде
браузермен және почталық клиентпен де жұмыс жасауға болады.Басқа
компьютерлерге анықталған сервис ұсынатын компьютерлерді серверлер (ағыл.,
to serve – қызмет көрсету) деп атайды, ал осы сервисті қолданатындар —
клиенттер.Көп жағдайларда үйдегі клиенттік компьютерлерде әр уақытта
Интернетке кіруге мүмкіндігі болмайды, сондықтан Желіге тек керек уақытта
ғана қосылады. Керісінше, компьютер-серверлер мәліметтерді берудің жоғары
жылдамдықты арналары арқылы Интернетпен байланысқан, сондықтан оларға
сұраныс арқылы хабарласуға болады.
Қосымша-серверлер және қосымша-клиенттер
Компьютерлерді серверлер мен клиенттер деп атағаннан гөрі, оларды
бағдарламалық қамсыздандыру деңгейіндегі клиенттер немесе серверлер деп
атаған жөн. Бір бағдарлама клиент есебінде, ал екіншісі сервер есебінде
іске қосылатын қосымшалардың өзара байланысы клиент-сервер архитектурасы
деп аталады.Сервердің басты тапсырмасы – сервиске қайсыбір клиент сұраныс
жібермейінше әр кезде жұмыс жасап және күту жағдайында болу болып
табылады.Серверде сұраныстардың көптігінен оның жұмысы баяулап және белгілі
бір сұраныстарға қызмет көрсетуді тежейді. Серверге сұраныс белгілі бір
протокол шегінде болады – бұл Желіде компьютерлер арасында байланысты
қамтамасыз ететін стандарттар жиыны. Серверлік бағдарламалар клиенттік
бағдарламаларға қызмет көрсету үшін компьютердің аппаратты ресурстарын
қолданады. Клиент-бағдарлама сұраныс құрып, оны Желі арқылы белгілі бір
адреске жібереді және алдын ала белгіленген протокол арқылы сервер-
бағдарламамен өзара байланысады. Сол бір компьютерде бірнеше серверлік
бағдарламалар орналаса алады. Клиенттік қосымша серверлік қосымша
орналасқан компьютерде де, сонымен қатар, серверден керегінше жойылған
компьютерде де орналаса алады, бірақ олар Желімен байланысса, бұл
айырмашылық тек уақыт бойынша жауаптың кідіруіне сәйкестеледі.
Әрбір сервер-бағдарламаның типі үшін өзіндік клиент-бағдарламасы бар.
Осылай, Web-клиент Web-серверге, почталық клиент – почталық серверге хабар
береді және т.б. Серверлік бағдарлама әрқашан сұранысты орындауға дайын
болу керек және сондықтан да сервер-бағдарлама жұмыс жасайтын
компьютерлерге сенімділікке және өнімділігіне байланысты жоғары шарттар
қойылады. Клиенттік компьютердің жұмысының тұрақтылығы бір адамның жұмысына
әсер ететіндіктен, олардың жұмысына сенімділігіне байланысты аз талаптар
қойылады, ал аппаратты сервердің жұмысының сенімділігіне байланысты
көптеген клиенттердің жұмысының жүргізілуі тәуелді болады. Жоғарыда
көрсетілген тәсіл (клиент-серверлік архитектура) дербес компьютердің
қолданушысына өзінің жұмыс үстелінен Интернетке қосылған миллиондаған
серверлердің ресурстарына қол жеткізуге мүмкіндік береді.
Провайдерлер және олардың желілері
Интернетке қарап, біз интернет-провайдерлердің қызметтерін пайдаланамыз
және ISP(Internet Service Provider – Интернет қызметін жеткізуші). Көбіне
ISP – бұл өзіндік желісі бар арнайы ұйым (магистральды деп аталады), оған
клиенттердің көптеген саны қосылады. Провайдердің желісі ғаламның кез
келген нүктесімен байланысуды қамтамасыз ететін жер жүзінің басқа да
желілерімен байланысуы мүмкін. Қалыпты жағдайда ISP-провайдерлер – бұл
белгілі бір аймақтарда өзіндік орналасу нүктесі (POP — Point of Presence)
бар ірі компаниялар, бұл нүктелерде клиенттерінің Интернетке қосылуын
қамтамасыз етуге арналған провайдердің аппаратты қамсыздығы. Ірі
провайдердің әртүрлі қалаларда өзінің орналасу нүктесі мен мыңдаған
клиентері болады. Бірнеше қалаларда орналасу нүктелері бар провайдерлермен
қатар, бір қалада орналасу нүктесі бар провайдерлерді де атап көрсетуге
болады. Телефон линиясы арқылы ISP мен байланысуды ұйымдастыру: ДК
қолданушысы драйверге хабарласады және модем жинақтарының ішіндегі
провайдер модемдерінің бірімен байланыс орнатады (модемді пул деп атауға
болады). Қолданушы өзінің ISP не қосылғаннан кейін, ол оның желісінің бір
бөлігі болып табылады. Провайдер өзінің серверінде клиенттерге әртүрлі
қызмет көрсете алады: электрондық почта (e-mail), желілер жаңалықтары
(Usenet) және т. б. Провайдердің магистральды желісін көбіне тіректі желі
немесе бэкбоундеп атайды (ағыл. Backbone — қырат). Провайдер желілері
көптеген клиенттерге қызмет көрсететіндіктен, оның жоғары жылдамдықты
желісі болуы және жоғары трафикті қамтамасыз етуі керек (желі бойымен
берілетін мәліметтер көлемі). Өзінің барлық орналасу нүктелерін біріктіру
үшін, провайдер ірі коммуникациялық компаниялардан жоғары жылдамдықты
арналарды жалға ала алады, сонымен қатар, өзінің арналарын тарта алады. Ірі
коммуникациялық компаниялардың өздерінің жоғары жылдамдықты каналдары бар.
Провайдерлердің желілерін біріктіру
Кейбір провайдерлердің клиенттері, мысалы, ISP-A бір бірімен өздерінің жеке
желілері арқылы өзара байланысады, ал басқа ISP-В компаниясының клиенттері
өздерінің, бірақ егер ISP-A және ISP-B желілерінің арасында байланыс
болмаса, онда А компаниясының клиенттері және В компаниясының клиенттері
бір бірімен байланыса алмайды. Өздерінің клиенттерін бір желіде біріктіру
мақсатында А және В әр қалада желілік кіруді (NAP — Network Access Points)
қамтамасыз ететін нүктелер арқылы өз араларында тікелей байланысты
орнатады. Осылайша, басқа провайдерлердің магистральды желілеріне қосылу
құрылады, нәтижесінде жоғары деңгейлі көптеген желілердің бірігуі болады.
Интернетте жүздеген ірі интернет-провайдерлер орналасады және олардың
магистральды желілері NAP арқылы әр түрлі қалаларда жасалады, және
мәліметтердің үлкен ағыны NAP-түйіннің әр түрлі желілері арқылы таралады.
Үлкен және кіші желілердің бірігуі (Интернетті құрайтын) негізінде шартты
келісімдер жатады. Әрбір клиенттің белгілі бір ISP пен өзінің компьютерін
немесе жергілікті желісін провайдер желісіне қосу туралы келісім шарты бар.
Кейбір ISP-A провайдерлердің клиенттері ISP-A желісіне қосылу туралы
келісім құрайды, өз кезегінде ISP-A ISP-B мен желілерін біріктіру туралы
келіседі және солай жалғаса береді..

Дәріс №5-6. INTERNET ЖЕЛІСІН ҰЙЫМДАСТЫРУ ПРИНЦИПТЕРІ
• Интернет негізгі қызметі
• ТСР/ІР жүйелік хаттамасы. IP – адрестер, URL – адрестер.
• Атаулар мен ресурстар көрсеткіштерінің домендік жүйесі.
• Internet Explorer – WWW – ке арналған браузер. Internet Explorer
бағдарламасының негізгі принциптер.
• WORLD WIDE WEB – жүйесімен қатынас құру тәсілі

Интернет негізгі қызметі

Әлеуметтік пенде болғандықтан адам әркашанда өзі сияқтылармен араласу
тәсілдерін іздестіреді. Соңғы кездегі INTERNET желісінің күрт дамып кетуі
(қазіргі кезде 18 000 әр түрлі желілерді біріктіріп, күнбе-күн жаңаларымен
толықтыруда) қашықтық ұғымын жоққа шығарып, планетамыздың кез-келген
нүктесін бір-бірімен бейнелі түрде байланыстыруда. Оның құрамында
миллиондаған компьютерлер, компьютер терминалдары және қарапайым
пайдаланушы адамдар бар. Кейбір есептеулер бойынша екі миллиондай
компьютсрмен 30 миллионға жуық адам жұмыс істеп жатыр. INTERNET желісіне
күніне 1000 компьютер қосылады екен. ISOC(Internet Society — Internet
коғамдастығы) президентінің жақында INTERNET желісін пайдаланушылар саны
бір миллиардқа жетеді деуі де бекер емес шығар. Мұнда таңданарлық еш нәрсе
жоқ.. Сол себепті INTERNET бізге "даналық көзі" болып көрінсе де, оның өзін
қалай пайдаланатынымызды білген артық болмайды.

Аздаған тарихи дерекгер мен статистикалық мәліметтер

INTERNET желісін алғашқы дүниеге келтіруге себеп болған 70-жылдар
басында АҚШ қорғаныс министірлігінін APRANET компьютерлік жүйесі болып
саналады, онда соғыс жағдайында байланыс желілерінің жұмысы зерттелген еді.
Желі нүктелерінің үлкен аумақта шашырап жатқандығына және олардың бір-
бірімен қосылу желілерінің күрделілігіне байланысты оның аздаған бөліктері
бұзылғанмен сау желілердің өзара байланысы жылдам қайта құрылып, қалыпты
жағдайына келе алатыны айқындалды.

Дегенмен INTERNET тек желі ғана емес, ол — желілердің желісі. INTERNET
көптеген байланыс желілерін бір-бірімен біріктіріп, дүниедегі ең, үлкен
компьютерлер торабын құрайды.

Оның қарапайым желілік нүктелері өкімет мекемелерінде, университеттерде,
коммерциялық фирмаларда, жергілікті кітапхана жүйелерінде, тіпті
мектептерде де орналасқан.

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

INTERNET -пен байланысқан провайдер компаниясы деп аталатын мекемелер
әрбір компьютерді INTERNET -ке қосып бере алады. Желіге қосылудың бірнеше
түрі бар, олар:

- қосылып тұратын тікелей байланыстар (кіру жолдары);

- тұрақты қосылып тұрмайтын байланыстар (кіру жолдары);

- почталық байланыстар.

ТСР/ІР жүйелік хаттамасы. IP – адрестер, URL – адрестер

Бұл атаулар әзірге түсініксіз шығар, енді олардың ерекшеліктерін
қарастырайық. Тұрақты қосылып тұратын байланыс - мұнда жеке компьютер
тікелей ТСР/ІР желісіне қосылған (Transmission Control Protocol/ Internet
Protocol - жеткізуді басқару протоколы/интержелі протоколы) түрінде болады,
бұл INTERNET -тің бір шеткі бөлігі, яғни жеке компьютср мекемедегі желімен
тұрақты байланыстағы негізгі компьютермен жалғасып тұр. Мұндай байланыс
ерекшеленген немесе тұрақты тікелей байланыс деп аталады.

Ерекшеленген немесе тұрақты тура байланыс тек ірі компаниялар мен
корпорацияларда болады. Провайдер-компания осындай мекемеде бағдарлауыш
орнатып, бағдарлауыш INTERNET -ке қызмет ететін компьютермен (хост-
компьготері) қосатын телефон каналын жалдап алады. Телефон каналы мен
INTERNET арасындағы байланыс тұрақты сақталады, сондықтан провайдер-
компаниясының компьютерімен байланысуға телефон шалу қажет емес, ауқымды
желіге әрбір адам өз компьютерімен кіреді де, қалаған жеріне INTERNET
арқылы мәлімет жібере (алады) береді.

Қосылып тұратын тура байланыс көбінесе SLIP, Point-to-Point Protocol
немесе РРР деп аталады (Serial Line Internet Protocol — тізбекті желі үшін
Internet хаттамасы, Compessed Slip — тығыздалған Slip, Point-to-Point
Protocol — "нүкте-нүкте" хаттамасы). Ал XRemote деп аталатын байланыс түрі
сирек кездеседі, бұл да ТСР/ІР секілді, бірақ телефон каналын тұрақты
пайдалануға негізделген, ыңғайлылығы жағынан бұл түр тұрақты қосылып
тұрмайтын байланыстан кейінгі орында тұр.

Почталық байланыс. INTERNET -пен қосыла алатын бірнеше почталық байланыс
түрлері бар. Провайдері CompuServe болып келген компьютерлер бірден Іпіетеі-
пен почталық байланысқа кіре алады. Олар өз почтасын INTERNET -ке беріп,
одан да бірден хат-хабар ала береді. CompuServe жүйесінде почта адресі
аддына INTERNET деп жазып қойылады. Бұл ортада әр түрлі тақырыптардағы
дискуссияларға қатысу үшін LISTERV жүйесін пайдаланған абзал. Осы секілді
почталық байланыстар желілік көмей (network gateways) деп аталады, олар
INTERNET желісімен шектеулі тәсілдер арқылы байланысады.

INTERNET -пен қатынас құру

Бізге кенеттен бір файл керек болып қалды делік және оның қай жерде екені
бізге белгілі болсын. Ол файл тегін берілетін программа, жұмысқа керекті
ақпарат (құжат), сурет немесе кітап та болуы мүмкін. Енді сол файлды өз
компьютерімізге қалай әкелу жолын қарастырайық.

Мұндай мақсат үшін файлды жеткізу хаттамасы деп аталатын жүйе қолданылады
(File Transfer Protocol — FТР). Практикада FТР немесе ftp термині жиі
ұшырасады. Каталогта немесе почталық хабарда "файлды алу үшін компьютерге
ftp жеткізу" деген сөздер кездесуі мүмкін. Ол осы файлды алу үшін FТР
жүйесі қолданылатынын білдіреді. FТР арқылы қызмет ететін арнаулы
программасы бар желіге қосылған компьютер ҒТР-сервер деп аталады. Көптеген
FТР-серверлер барлық адамдар үшін ашық болады, кез-келген адам одан
администратор рұқсатымен әр түрлі мәліметтер ала алады. Бұл тәсіл анонимдік
ftp деп аталады, өйткені мәлімет алу үшін ешкім өз атын айтпайды, белгісіз
(аноним) болып қала береді. Көбінесе пароль ретіндс әркім өз почталық
адресін енгізеді. Ал кей кезде мәліметті пайдалану үшін (кіру үшін) кіру
атауын (nameid) және/немесе паролін (password) білу қажет болады.

FТР-серверінің мәліметтерімен қатынас құру үшін әркім стандартты кіру
сұхбатын орындауы керек. Оның бір мысалы мынадай болуы ықтимал:

ореn ftp.геlсоm.su nаmеіd раsswоrd — FTP-серверге кірердегі сұраныс
тізбегі, мұндағы:

ореn FTP -сервермен қатынас құру сұранысы;

ftp.relcom.гsu — РТР-серверінің қажетті информациямен толықтырылған аты;

nаmеіd — пайдаланушының кіру аты немесе anonimus;

раsswоrd — сұраушы адамның паролі немесе оның почталық (Е-таіІ) адресі;

Парольді немесе өз атын дұрыс енгізбегенде, FTP-сервер тек шектеулі
командалар жиынын орындай алады, атап айтқанда:

һеLр — сервер командалары бойынша анықтама беру;

quit: — сеансты аяқтау.

Пароль мен атау дүрыс болса, катынас құру құқығына
байланысты командалар орындауға болады. Олардың
құрамына мыналар кіреді:

cd каталог аты — каталогты ауыстыру;

cd.. — жоғарғы деңгейден каталогқа кайту;

get файл аты — ҒТР-серверден файл алу;
binary — екілік файлдарды жіберу/алу режиміне ауысу (типтері ехе, сот,
аг]), гаг, іаг, 2Ір жәш т. б.)

dіг — ағымдағы каталог файлдары тізімін беру.

ҒТР-сервермен байланысу сеансықда пайдалануга болатын командалар
жиынтығын НЕLР командасы арқылы алуға болады.

ҒТР-серверден файлдар алу кезіндегі әдеттегі командалар жиынтығынан мысал
келтірейік.

сd риb — барлық ҒТР-серверін пайдаланушыларға ашық РАВ каталогын
(директориін) пайдалану;

dir — сол каталог файлдар тізімін беру;

get 03ndex.txt — ҒТР-серверден аты көрсетілген мәтіндік файлды алу;

bіnагу — екілік файлдарды өңдеуге өту;

get fаг 140.ziр — ЕТР-серверден екілік файл алу;,

guit — ҒТР-серверден ажырау (байланысты үзу).

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

Атаулар мен ресурстар көрсеткіштерінің домендік жүйесі

Netscape Nаvіdаtог және Іntегnеt Ехрlогег тәрізді ыңғайлы графикалық
интерфейсі бар браузерлердің шығуына байланысты әрбір адамның
жұмысы керек кезінде "тышқан" тетігінің батырмасын басуға ғана
тірелгенін айтуға болады.

Мысал ретінде Місгоsoft Іntегnеt Ехрlогег 3.01 программасын пайдалану
кезіндегі FTP-сервермен ftp:// ftp.ге1соm.ru қатынас құру сеансын талқылап
шығайық.

Браузерді іске қосу үшін жүмыс столынан немесе есептер тақтасынан
Іntегnеt Ехрlогег пиктограммасын табу қажет (29.1.сурет), соған курсорды
алып барып, тышқанның негізгі батырмасын екі рет шерту керек.

Іntегnеt Ехрlогег -ді іске қосар алдында желімен алыстан қатынас кұру
программасы іске кіріседі, ол провайдер серверімен сіздің компьютеріңізді
байланыстырады.

Мұндайда үш терезегс мәліметтер енгізілуі тиіс Сіздің желідегі аты-
жөніңіз және пароль (Бұлар сізге провайдер-компания арқылы Іntегnеt -ке
қосылып тізімге тіркелген кезде бекітіледі), оған қоса провайдер серверімен
байланыстыратын олардың телефон нөмірі. Сіздің сеанс алдындағы ең соңғы
әрекетіңіз "Байланыс орнату" (Установить связь) батырмасын басу болып
табылады. Осы сәттерде сіздің экраныңызға алыстағы компьютермен қатынас
құрған программаның бірнеше терезелері шығады. Сеанс кезінде кез келген
сәтте "Болдырмау" (Отмена) батырмасын басу арқылы байланысты үзуге болады.

Егер барлық әрекеттер дұрыс орындалса, экранға Іntегnеt Ехрlогег терезесі
шығады. Одан әрі жұмыс істеу барысында сізге аспаптар тақтасында бірнеше
батырмалар мен меню жолдарын пайдалану керек болады. Соларды қарастырып
өтейік. Батырмалар астындағы жазулар олардың қызметін көрсетеді, бірақ қай
кезде оларды басу керектігі онша түсінікті бола бермейді. Ал, сеанс кезінде
оқып үйрену оңай емес, өйткені желідегі байланыс орнатылған сәттен бастап,
ол біткенше уақытқа ақы төленеді.

Алдымен "Адрес" өрісін карастырайық, Бұл өрісте FTP адресі былай
теріледі: ftp://ftp.relcom.ru

Адрес терілген соң, "Еntег" пернесі басылады. Осы сәттен бастап сеанс
соңына дейін пернелер кажет болмайды, өйткені барлық әрекеттер тышқанмен
орындалады.

Internet Explorer – WWW – ке арналған браузер. Internet Explorer
бағдарламасының негізгі принциптер

Internet ішінен керекті информацияны іздеп табуға мүмкіндік беретін тағы
бір мүмкіндікті қарастырып өтейік. Word wide web(WWW, /Web), яғни
"дүниежүзілік өрмек" информация іздеп бүкіл дүние жүзіне "электрондық
саяхат" жасайтын гипермәтіндік жүйе болып табылады. Қазіргі кездегі әр
түрлі информация алуға болатын ең кең тараған жүйе ретінде, WWW ессптеледі.
Internet -тің қалған бөліктерінш гөрі WWW жүйесін пайдалану жеңіл, әрі
ыңғайлы.

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

WWW жүйесі байланыс орнатылған құжаттардан тұрады. Гипермәтін дегет не?
Егер сіз Windows жүйесінің көмек беретін мәліметтер құрылымын қарап
шықсаңыз немесе Macintosh компьютерінің Нуреr Саrd файлын көрсеңіз, сол
гипермәтін мысалы бола алады. Гипермәтін құжат бір ұғымнан екінші ұғымға
мәтіндік байланыс арұылы (мазмүны арқылы) тез өтуді қамтамасыз етеді
(links). Бір мәтінді бастан аяқ оқудан гөрі сол мәтіннің белгілі бір
бөлігін ғана оқып, сонан кейін сол бөлікпен байланысты басқа үғымдарға
жылдам өте аласыз. Бұлай жылжу ерекшеленген мәтін үзіндісіне курсорды алып
барып тышқанды шерту арқылы орындалып отырады.

WORLD WIDE WEB – жүйесімен қатынас құру тәсілі

Web жүйесімен жұмыс істеудің бірнеше тәсілі бар. UNIX операциялық
ортасында сервистік қызмет көрсететін, компания жасап қойғақ, арнайы
команда арқылы WWW браузерімен оңай байланысу жолы бар. Оны іске қосу үшін
WWW немесе linх сөздерін енгізу керек.

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

Қолданылып отырған тәсілге қарамастан сіз гипермәтіндік файлдарда
мәліметтерді іздеп таба алатын браузермен жұмыс істей аласыз. Енді біз
желіні пайдалану кезінде жұмыс істеуге тиіс Internet Ехрlorer графиктік
браузерімен сіздерді таныстыралық. Әрине бұдан басқа да браузерлер бар,
мысалы, Netscape Navigator, бірақ Windows 98 жүйесі өз Internet Ехрlorer
программасының ішкі браузерімен жабдықталады. Windows жүйесінің басқа
түрлерінде де арнаулы бірден бекітіліп берілетін ішкі браузерлер болады,
олармен жұмыс істеу де ыңғайлы. Ал егер кейбір себептермен сіз Internet
Ехрlorer -мен жұмыс істегіңіз келмесе, онда Netscape Navigator браузеріне
немесе басқасына оңай ауыса аласыз және олардағы жалпы жұмыс істеу
ережелері бір-біріне ұқсас болады.

Сонымен FТР-серверімен жұмыс істеуді меңгерсеңіз және Web жүйесінің
бірнеше адресін білсеңіз, онда желіге кіріп жұмыс істеу қиын болмайды.
Адресті білмесеңіз де, өзіңізге керекті информацияларды тақырыбы арқылы
іздеу ісіне кірісіп кете бересіз.

Internet Ехрlorer немесе Navigator іске қосылса, браузер автоматты түрде,
сіз араласпай-ақ, "өз" серверімен байланыс орната береді. Ал, егер де
Internet Ехрlorer жүйесімен жұмыс істейтін болсаныз, онда бірден Місrosoft
компаниясының WWW сервері парағымен байланысатыныңыз есіңізде болсын, оған
мынадай мәлімет енгізілсе, http://www.home.microsoft.com./int/ru

Мұнан кейін "лифт" көмегімен парақтың төменгі жағына өтіп, өзіңізге
керекті ақпаратты таңдайсыз. Курсорды ерекшеленген мәтін бөлігіне алып
барып, тышқанды бір рет шертіңіз, браузер осы таңдап алынған жаңа мәтін
бетін сіздің өз машинаңызға жеткізеді. Біздің жағдайда курсорды " Internet
-те парақты іздеу үшін осы сілтемені тандаңыз" (выберите данную ссылку)
деген сөзге, яғни оның ерекшеленіп тұрған үзіндісіне алып барып, тышқанның
сол жақ батырмасын шертеміз. Сол сәтте браузер сіздің компьютеріңізге
Internet -тегі информация іздеу жүйелерінің жиі қолданатын бірнеше адресі
көрсетілген келесі парақты шығарады да, сіздің іздеу шарты көрсетілген
(критерий) информация енгізуіңізді және "іздеу" батырмасын басуыңызды
өтінеді.

Бұл сервердің тағы бір ерекшелігі — кодтарды сәйкестендіре отырып
өзгерту: бір сұрақты әр түрлі кодтар түріне келтіру үшін бірнеше рет
енгізудің керегі жоқ. Бір енгізілген мәлімет автоматты түрде барлық кодқа
айналады (нәтижені қарап шығу үшін тек қаріпті өзгерту жеткілікті),
сервердегі кодтау түрі екеу — КОИ-8 бен 1251). Басқа да кодтарда
өрнектелген информациялар болғанымен, олар осы екі кодтау түріне автоматгы
түрде айналады. Керекті ақпарат табылса, ары қарай барлық жұмыс FТР-
серверіндегі сияқты орындалады.

Дәріс №5-6. Өзін-өзі тексеру сұрақтары немесе тесттер
1. Интернеттегі клиент-серверлік архитектура.
2. Компьютер мен қосымшаның клиент-серверлі әрекеттесуі.
3. Компьютерлік тораптар.
4. Интернеттегі тораптардың иерархиясы.
5. Интернеттегі ISP, POP, NAP түсініктері.
6. Интернетке ақпаратты жіберу. TCP/IP протоколдарының стэгі.
7. IP – бағдарының үрдісі.
8. Домендік аттардың жүйесі. DNS – сервер.
9. Браузерлер мен серверлер.
10. Прокси-сервер. URL-мекенінің форматы.

№7-8. WEB технологиялар негіздері: КОМПЬЮТЕРЛІК ЖҮЙЕЛЕРДІ ҚҰРУ НЕГІЗДЕРІ.
КОМПЬЮТЕРЛІК ЖЕЛІЛЕР КЛАССИФИКАЦИЯСЫ
• Компьютерлік жүйелерді құру негіздері
• Компьютерлік жүйелердің пайда болуы мен даму тарихы
• Жасанды және нақты желілер
• Компьютерлік желілер классификациясы
• Компьютерлік желілер топологиясы
• Серверді пайдалану технологиясы

Компьютерлік жүйелерді құру негіздері
ЭЕМ-нің пайда болуымен жеке компьютерлер арасында мәліметтермен алмасу және
ЭЕМ ресурстарын рационалды бөлу туралы сұрақ туындады.
Бірінші ЭЕМ-лар эксплуатацияда қиын болды және қымбат аппараттық компонент
керек болды, ЭЕМ-ді құрудың бірыңғай стандарты болмады. Компьютерлердің
аппараттық және программалық базасының дамуымен желілік технологиялар да
жаңдандырыла басталды. Басында мәліметтерді беру жүйесі коммерциялық,
әскери және ғылыми мақсатта құрылды, содан кейін желіні пайдалану ортасы
ұлғая түсті.

Қазіргі уақытта компьютерлік желілер біздің өміріміздің бір бөлігі болып
табылады, оларды пайдалану облысы адам қызметінің барлық сфераларын
қамтиды.

Компьютерлік жүйелердің пайда болуы мен даму тарихы
Компьютерлік желілердің дамуы ЭЕМ-нің дамуымен және телекоммуникация
жүйелерінің дамуымен байланысты.
Компьютерлік желілер құру бойынша жұмыстар ХХ ғасырдың 60-шы жылдары
басталды. Компьютерлік желі түрінде үлкен (кейін миниЭЕМ) ЭЕМ-дер негізінде
құрылған мәліметтерді телеөңдеу жүйесі (МТЖ) болып табылды.
Мәліметтерді беру құралы ретінде телефондық желі пайдаланылды. МТЖ негізгі
элементі модем, абоненттік пунктер және коммуникация құрылғылары болып
табылады. МТЖ тек аналогтық сигналдар арқылы берілді.
МТЖ негізгі кемшілігіне төмен жылдамдығы (9600 бит/с, нақты 2400 бит/с)
болып табылады. Сондықтан МТЖ жетілдіру бағытының бірі цифрлік телефондық
коммутаторлар құру болып табылады.
МТЖ екінші кемшілігі тек бір жылдамдықпен сол уақыт моментінде байланыс
арнасы бойынша мәліметтерді беру мүмкіндігі болып табылады. Бұл кемшілік
АҚШ-та 70-ші жылдары кабельдік телевидение коммуникациясын бірінші рет
пайдалану арқылы өтті.
Желіге көшудің үшінші бағыты бірнеше үлкен ЭЕМ-дің бір-бірімен байланысын
қамтамасыз ету үшін жоғары жылдамдықты шиналар құрылды.
Желі дамуының төртінші бағыты мәліметтерді өңдеуді жетілдіру болды. 80-ші
жылдардың ортасына қарай ДЭЕМ пайда болуымен желінің барлық қарастырылған
даму тенденциялары бір-біріне жақындай түсті, бұл қазіргі компьютерлік
желілерді құруға әкелді.

Жасанды және нақты желілер
Желіні ұйымдастыру әдісі бойынша жасанды және нақты болып бөлінеді.
Жасанды желілер (псевдожелілер) компьютерлерді параллель порттар арқылы
бірге байланыстыруға мүмкіндік береді және қосымша құрылғыларды қажет
етпейді. Кей кезде мұндай желідегі байланысты ноль-модем (модем
пайдаланылмайды) бойынша байланыс деп аталады. Қосылудың өзін ноль-модем
деп атайды. Жасанды желілер бір компьютерден екіншісіне ақпаратты
тасымалдау кезінде пайдаланылады. MS-DOS және windows ноль-модемдік
қосылуды өндіру үшін арнайы программалармен қамтылған. Негізгі кемшілігі –
мәліметтерді берудің төмен жылдамдығы мен тек екі компьютерді қосуға
мүмкіндігі бар.
Нақты желілер коммутацияның арнайы құрылғысы көмегімен компьютерлерді
байланыстыруға мүмкіндік береді.
Негізгі кемшілігі – қосымша құрылғыларды қажет етуі.

Барлық компьютерлік желілерді белгілер тобы бойынша классификациялауға
болады:

1) Территориялық таралу;

2) Ақпаратты жіберу жылдамдығы;

3) Топология;

4) Компьютерлер арасындағы байланысты ұйымдастыру.
Территориялық таралу
Территориялық таралу бойынша желілер жергілікті, ауқымды және аймақтық
болуы мүмкін.
Жергілікті – бұл 10 м2 көлемінде территорияны қамтамасыз ететін желі
Аймақтық – қала немесе облыс территориясында орналасқан
Ауқымды мемлекет немесе мемлекеттер тобы территориясында орналасқан,
мысалы, бүкіләлемдік желі Internet.
Компьютерлік желілер классификациясы
Желі классификациясында екі негізгі термин бар: LAN және WAN.
LAN (Local Area Network) – тұйық инфрақұрылымы бар жергілікті желі. "LAN"
термині кішкентай офистік желіні, бірнеше жүз гектар алатын үлкен зауыт
деңгейіндегі желіні сипаттауы мүмкін.
WAN (wide Area Network) – жергілікті желіні, сонымен қатар
телекоммуникациялық желі мен құрылғыларды қосатын, үлкен географиялық
аймақтарды біріктіретін ауқымды желі. Мысалы WAN – коммутация пакеттері
(Frame relay) бар желілер, олар арқылы әртүрлі компьютер желілері өзара
«сөйлесе» алады.
Сондай-ақ "корпоративті желі" термині әдебиетте бірнеше желілерді
біріктіруді белгілеу үшін пайдаланылады, олардың әрқайсысы әртүрлі
техникалық, программалық және ақпараттық принциптерде құрылуы мүмкін.

Жергілікті желілер жабық типті желі болып табылады, оларға кіру тек қана
пайдаланушылардың шектеулі ортасына ғана рұқсат. Ауқымды желілер ашық болып
табылады және кез келген пайдаланушыға қызмет көрсетеді.
Жіберу жылдамдығы бойынша
Ақпаратты жіберу жылдамдығы бойынша компьютерлік желілер төмен-, орташа-
және жоғарыжылдамдықты болып бөлінеді.
• төменжылдамдықты (10 Мбит/с дейін),
• орташажылдамдықты (100 Мбит/с дейін),
• жоғарыжылдамдықты (100 Мбит/с жоғары);
мәліметтерді жіберу жылдамдығын анықтау үшін желіде бод пайдаланылады.

Baud (бод)

Дискретті көшу немесе бір секундта болатын жағдайлар санымен өлшенетін
сигналдарды жіберу жылдамдығының бірлігі. Егер әрбір жағдай бір битті
көрсетсе, бод бит/сек эквивалентті.

Компьютерлік желілер топологиясы
Компьютерлерді желіге қосу әдісі оның топологиясы деп аталады.
Желі топологиясының ең кең тараған түрлері:

- шиналық топология [bus topology], онда кабель ЭЕМ-нен ЭЕМ-ге тізбектей
байланыса отырып жүреді. Магистраль ретінде коаксиальды кабельді
пайдаланады.

1-сурет. Шиналық топология
- жұлдыз топологиясы [star topology] әрбір сервер мен жұмыс станциясы
арнайы құрылғыға – орталық концентраторға [hub] қосылады.
Бір жұмыс станциясынан келетін кабельдің үзілген жері қалған жұмыс
станцияларына әсер етпейді.

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

- сақина топологиясы. Бұл желіде мәліметтер бір тораптан екіншісіне
жабық шеңбер бойынша беріледі.
Серверді пайдалану технологиясы
Серверді пайдаланудың екі технологиясын ерекшелейді: файл-сервер
технологиясы мен клиент-сервер архитектурасы.
Бірінші модельде файлдық сервер пайдаланылады, онда көптеген программалар
мен мәліметтер сақталады. Пайдаланушы талабы бойынша оған қажетті программа
мен мәліметтер жіберіледі. Ақпаратты өңдеу жұмыс станциясында орындалады.
Клиент-сервер архитектурасында мәліметтермен алмасу қосымша-клиент (front-
end) және косымша-сервер (back-end) арасында жүзеге асады. Мәліметтерді
сақтау және оларды өңдеу күшті серверде жүргізіледі. Жұмыс станциясы тек
қана сұраныстың нәтижесін алады. Ақпаратты өңдеу бойынша қосымшаны
пайдаланушылар көбінесе осы технологияны пайдаланады.

Дәріс №7-8 Өзін-өзі тексеру сұрақтары немесе тесттер
1. Ақпаратты өңдейтін және беретін WEB-технологиялар туралы түсінік.
2. WEB-технологияларының дамуының тарихи мәліметі.
3. WEB-қосымшаларының типтеріне шолу.

Дәріс №9-10. ГИПЕРМӘТІНДІК БЕЛГІЛЕУЛЕРДІҢ ПРИНЦИПТЕРІ
• Құжаттардың құрылымы.
• НТМL тегінің топтары.

Құжаттардың құрылымы

HTML –да тегтік модельдер құжаттың белгілеулері болып табылады Тегтік
модель құжатты тегпен басталып және аяқталатын контейнерлердің жиынтығы
сияқты сипаттайды. Яғни НТМL құжаты қарапайым АSСII-файлы сияқты
көрсетіледі .

Көбінесе НТМL құжаттарының тегтерін түсіну және қолдану оңай, өйткені
олар ағылшын тілінің сөздерімен пайдаланылған қысқартуларды және
белгіленулерді түсінеді. НТМL – тегі қажет емес тегтің атрибуттар
тізімінен кейін болатын аттан құралады. Тегтің мәтіні бұрышты жақшалардан
тұрады (< және >).Тегтің ең қарапайым оңай вариянты – бұрыштық жақшаларға
негізделген аты. Мысалға: немесе . Қиын тегтер үшін, функцияның
тегтерін видео өзгерту үшін автормен анықталған дәл мағынасы бар болатын
атрибуттардың айырмашылығы сипатталады.

Тегтердің атрибуттары атымен жүреді және бір немесе бірнеше
табуляциялардың белгілерімен біріншісі екіншісінен бөлінеді. Тегте
атрибуттардың жазылу реті қажет емес. Атрибуттардың мағынасы, егер ондай
бар болса, атрибуттардың атынан кейін тұратын теңдік белгісінен кейін
тұрады. Егер атрибуттың мағынасы бір сөз немесе сан болса, онда оны қосымша
белгілемей – ақ теңдік белгісінен кейін көрсетуге болады. Барлық қалған
белгілеулерді бір (‘) немесе екі (“) тырнақшалармен аяқтау керек, әсіресе
егер олар бірнеше пробелдармен бөлінген сөздерден тұрса. Атрибуттың
ұзындығының мағынасы 1024 таңбамен шектелген. Атрибуттардың мағынасын
айтуға болмайтын, тегтердің және атрибуттардың аттарында таңбалардың
регистрі саналмайды. Мысалы, HREF атрибутының мағынасы ретінде басқа
құжаттарда URL- ді енгізу кезінде керекті регистрді қолдану қажет.

Көбінесе НТМL-тегі арасында мәтін және құжаттардың басқа элементтері
орнласатын бастапқы және соңғы компонеттерден тұрады.

Соңғы тегтің аты бастапқы тегтің атымен бірдей, соңғы тегтің алдына қисық
сызық (/) таңбасы қолданылады. Мысалы : шрифт тегінің – курсив түрі үшін
, оны жабатын қос былай белгіленеді - , ал тақырып тегі үшін
<ТIТLЕ>, оны жабатын қос былай болады - . Соңғы тегтер ешқашан
атрибуттардан тұрмайды. Тегтер мағынасы әмбебап программалау тіліндегі
тырнақшалардағы "begin/end" түсінігіне жақын.

Жазылған тегті қолдану кезінде құжатта ерекше назар аударып отыру керек.
Соңынан бастап біріншісіне дейін жазылған тегерді жауып отыру керек.
Кейбіреуі автономды элементтер болғандықтан НТМL-тегтерінің соңы
элементтерден тұрмайды.Мысалы графикалық бейне құжатына қою үшін, бейне
тегі қолданылады.Сондай-ақ автономды тегтерде жолдарды бөлу (
),
көлденең сызық () және қөрініс мазмұнына әсер етпейтін құжат туралы
ақпараттан тұратын тегтер, мысалға: және .

Кейбір жағдайларда құжаттарда соңғы тегтерді жіберуге болады. Браузердің
көпшілігі құжаттағы мәтінді Большинство браузеров реализованы так, что при
обработке текста документа начальный тег воспринимается как конечный тег
предыдущего. <Р>.

Ең көп таралған тег абзац тегі - өйткені оны құжаттарда өте жиі
қолданады, кейде оны әр абзацтын басына қояды. Бір абзац біткен кезде,
келесі тег
браузерге: «Алдындағы абзацты аяқтап келесіні бастау керек»
деп сигнал береді. Авторлардың көбі абзацтың соңғы тегін қолданбайды.

Басқада соңғы тегтер бар, браузерлер жақсы жұмыс істейтін. Мысалы НТМL-
дың соңғы тегі . Дегенмен құжатты құруда шатаспау және қате кетірмес
үшін соңғы тектерді мүмкіндігінше қолданып отыру керек.

Жалпы HTML форматында контейнерлерді құру схемасының жазылу түрі:

"контейнер" := <"тегтің аты" "атрибуттардың тізімі">

контейнер мазмұны

НТМL тегінің топтары

Барлық НТМL тегтерінің тағайындалуы мен әрекеттесу орталарын келесі
негізгі түрлерге бөліп көрсетуге болады;
• Құжаттың құрылымын анықтайтындар;
• Гипермәтін блоктарын өңдеу (параграфтар, тізімдер, кестелер,
суреттер);
• Гипермәтіндік сілтемелер немесе закладки;
• Диалог ұйымдары үшін формалар;
• Программаны шақыру.

Гипермәтіндік желінің құрылымы гипермәтіндік сілтемелермен беріледі.
Гипермәтіндік сілтеме - бұл сілтемесі анықталған тематикалық, логикалық
немесе құжатпен қандайда бір басқа тәсілмен байланысқан HTML құжатының
басқа адресі немесе Internet – тің ақпараттық ресурсы.

WWW жүйесінде гипермәтіндік сілтемелерді жазу үшін, Universe Resource
Locator деп аталатын арнайы форма өңделіп шығарылған. Бұл өңделген форманы
қолдануды келесі мысалда көруге болады:

Бұл мәтін

Гипермәтіндік сілтеме - дан тұрады.

Жоғарыда көрсетілген мысалда HTML – де якарь (anchor) деп аталатын "A"
тегін URL формасында бұл сілтемені жазу үшін, гипермәтіндік сілтемені
(Hypertext Reference) білдіретін "HREF" атрибутын қолданады. Берілген
сілтеме "polyn.net.kiae.su" желіде "http" протоколымен жүзеге асырылатын
рұқсат "altai" директориясында "index.html" атпен жазылған құжатты
көрсетеді.

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

HTML-құжатының құрылымы бірін-біріне қойған контейнерлерді қолдануға
мүмкіндік береді. Құжаттың өзі – бұл тегінен басталатын және
тегімен аяқталатын үлкен бір контейнер:

құжаттың мазмұны

HTML контейнері немесе гипермәтіндік құжат екі қойылған контейнерден
тұрады: құжаттың тақырыбы (HEAD) құжаттың денесі (BODY):

Класикалық құжаттың қарапайым түрін қарастырайық:

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

Дәріс №9-10. Өзін-өзі тексеру сұрақтары немесе тесттер
1. Интернетте адрисация: ip-адресі және URL.
2. HTML тілі. Таңбалар, тегтер, элементтер, атрибуттар.

Дәріс №11-12. HTML ТЕГТЕРІ
• Құжат бетінің тегі
• Белгілеуді басқару тегі
• Символдарды бейнелеуді басқару тегі
• Бейнелеу формасын басқару тегі
• Табуляция
• Тізім

Құжат бетінің тегі

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

HTML-HEAD құжаты тақырыбының контейнерлері

Құжат тақырыбы атрибутты қажет етпейді. Тақырып тегінің басты
тағайындалуы – бұл барлық құжаттардың бейнелеу параметрлерін түгелдей
сипаттау. Бұндай параметрлерге құжаттарды бейнелеу стилін, гипермәтіндік
сілтеменің жалпы базалық адресін, жалпы гипермәтіндік сілтеме,
идентификатор және құжат атын және т.б. жатқызуға болады. Біз тек қана жиі
кездесетін контейнерлерді қарастырамыз.

TITLE

Такырып тегінде жиі қолданылатын құжат аты болып табылады.

TITLE келесі синтаксисті алады

Құжат аты

TITLE тегінің мазмұны құжат атының алаңында бейнеленеді.

BASE

BASE тегі URL формасында гипермәтіндік сілтеме көрсету формасымен
байланысты. URL спецификациясы құжат адресатының екі формасын анықтайды:
толық және толық емес. HTML URL адресінің толықтай формасын қолдануға
рұқсат етеді. Сонымен спецификацияның екінші формасын қолдану үшін, оны
басқа нәрсемен негіздеу керек, базалық адресті сұрау толық еместен URL-дің
толық формасын қалыптастыруда қолдануға болады. BASE тегі осы базаны
анықтауға мүмкіндік береді.

ISINDEX

HTML-құжатын кілттік сөз бойынша іздеу мүмкіндігі құжат тақырыбының
ISINDEX тегі арқылы анықталады. Тілдің алғашқы версиясында берілген тег
қосымша атрибут қабылдамады. Егер сервер кілттік сөз бойынша сұраныс
жасайтын болса, онда ол автоматты түрде тақырыпқа ISINDEX тегін қояды.
Кілттік сөз тізімін клиент құжат адресіне “?” символдан кейін жазады.
Тілдің алғашқы версиясында өңдеу программасын көрсету және “SEARCH ISINDEX”
стандартының орнына сөйлемді сұрау мүмкіндігі туды.

Көрсетілген мысалда HREF атрибуты сұранысты өңдеу программасының адресін
анықтайды, ал атрибут PROMPT – шақыру мазмұнын анықтайды.

META

META тегі HTML спецификациясында жоқ құжат тақырыбының конструкциясын
анықтау үшін қажет. Ол үш атрибут қабылдайды: NAME, CONTENT, HTTP-EQUIV.
Берілген тексті қолдану қиындығы, осы тег арқылы еңгізілетін конструкцияны
интерпретациялау үшін, сервис немесе интерфейс қолданушылар осы
конструкцияны кеңейтуі және қолдануы керек. Осындай жұмыс түрі үшін
программа SGML конструкциясын түсіндіріп беру (интерпретировать) керек.
Берілген тегті тәжірибеде қолданудың бірден-бір түрі тақырыпқа анықталған
HTTP-EQUIV атрибуты арқылы протокол бойынша HTTP ақпаратын қосу.

< META HTTP-EQUIV=”Keywords”

CONTENT=”Plasma, Nuclear Physics”>

Осындай қолдану кезінде почтаны жіберуге ыңғайлы болу үшін, HTTP-пакет
тақырыбында мынадай жолдар қосылады: Keywords: Plasma, Nuclear Physics.

Құжат денесінің тегі.

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

-иерархиялық контейнер және заставка;

-тақырыптар (Н1-Р6 дейін);

-блоктар(параграфтар, тізімдер, формалар, кестелер, суреттер және т.б.);

-көлденеңінен белгілеп алу және адрестер;

-мәтіндер, стильдерді жүргізу облыстарына бөлінген(сызылған, белгіленген,
курсивті);

-математикалық бейнелеу, графиктер және гипермәтіндік сілтеме;

BODY

Құжат денесінің тегін бейнелеу BODY тегі арқылы бастап жазылады. HEAD
тегінен айырмашылығы, BODY тегі атрибут қабылдайды:

ID-тег идентификаторы. Тегті атау үшін, сол сияқты гипермәтіндік сілтеме
бойынша нүктелік ауысу түрінде қолданылады. Берілген атрибут құжат бетінің
барлық тегінде бар.

LANG-екісандық ISO-639 код түрінде құжат тілін анықтайды, нүктеден
кейін міндетті емес ISO-3166 форматында қала коды алынады. Тіл стандартын
құраушылардың ниеті бойынша берілген атрибут түсіндіру программасын тану
және көптілді мәтінді бейнелеуді басқару керек. Сонымен қатар Arena да,
арнайы HTML 3.0 иллюстрациялау үшін арналған, ол осы мүмкіндікті іске
асырмайды.

BACKGROUND-құжат мәтінін бейнелейтін фонды анықтайды, мысалы, HTML-
құжатында фон ретінде үлкен емес графикалық кескін ”bgr.gif” қолданылады.

< BODY BACKGROUND =”bgr.gif”>

Осы мысалда көрсетілгендей, берілген атрибуттың мәні ретінде URL
формасында қысқартылған адрес қолданылады. Бұл локальдық файл адресі.

Белгілеуді басқару тегі

Тақырыптар.

Тақырыптар құжаттың бастапқы бөлімін қарастырады. Стандарт бойынша
тақырыптың алты деңгейі анықталған: Н1-ден Н6-ға дейін. Мәтін, <Н1>
тегімен қоршалған, үлкен көлемде болады-бұл басты тақырып. Егер мәтін
<Н2> тегімен қоршалса, онда ол бірнеше есе кішірек көрінеді; ішкі
мәтін <Н3> одан да кішірек және ары қарай <Н6> дейін. Кейбір
программалар тақырыптың көп санын қолдануға мүмкіндік береді, бірақ та үш
деңгейден көбі сирек кездеседі, ал бестен көбі тіпті сирек кездеседі.

ALIGN атрибуты.

ALIGN атрибуты мәтінді сол жақ шетке, оң жақ шетке, ортаға және ені
бойынша теңестіруге арналған. Үнсіздік бойынша мәтін сол жақ шетке қарай
теңестіріледі. Берілген атрибутты сол сияқты кестеге және графикке
қолданамыз.

Келесі кесте ALIGN атрибутының мүмкін мәнін анықтайды.

Justify мәні интерпрпетацияның барлық программаларында іске асырылмаған.

ALIGN атрибутының көмегімен сіз мәтінді графикалық объектінің
айналасында <орналастыруға> болады. Ол үшін
тегін графикалық объект тұратын жерге апарып қою керек және ALIGN=LEFT,
ALIGN=RIGHT және ALIGN=CENTER атрибутын қосу қажет. Одан басқа HSPACE= және
VSPACE= атрибутының (олар төменде сипатталады) көмегімен бейнені мәтіннен
айыратын тік және көлденең алаң ұзындығы сұралады. Сонымен қатар бейненің
айналасына рамка құруға және кестені мәтінмен жиектеуге болады.

Жалпы айтқанда, CLEAR барлық блоктық тегтер үшін жалпы болып табылады,
бірақ та барлығына да іске асырылған жоқ.. CLEAR келесі мәндерді
қабылдайды:

CLEAR атрибутында сандық мәнді де көрсетуге болады:

тегі

Жолдың аударылымы мәтінді бейнелеудің стандарттар ретін бұзу үшін
қолданылады. Интерпретацияның қарапайым режимінде қолданушының интерфейс
программасы мәтінді автоматты түрде жолдарға бөлу арқылы жұмыс терезесінде
көрсетеді. Бұл режимде мәтінде бар болған соңғы жол ескерілмейді. Кей-кезде
үлкен айқындық үшін басуды жаңа жолдан бастау керек. Ол мақсатта
тегі
қолданылады.
тегіндегі CLEAR атрибуты көрсетілген нүктеде объектіні
мәтінмен көрсету (обтекание) үшін және содан кейін мәтінді объекттің ар
жағында бос областа жалғастыру үшін қолданылады. Объекттің ар жағында
жалғасып жатқан мәтін CLEAR атрибутында LEFT, RIGHT және ALL мәндеріне
сәйкес тегістеледі

тегі

тегі (No Break, үзіліссіз) браузерге барлық мәтінді бір жолда
үзіліссіз бейнелеуге нұсқау береді. Егер тегінде бекітілген мәтін
экранға сыймаса, браузер құжат терезесінің төменгі бөлігіне горизонтальды
айналдыру жолағын қосады. Егер сіз айкын жерден жолды алып тастағыңыз
келсе, сол жерге
тегін қойыңыз.

Символдарды бейнелеуді басқару тегі

Бұл тегтерді екі классқа бөлуге болады: бейнелеу формасын басқару тегі
(font style) және ақпарат типін сипаттайтын тегтер (information type).
Әртүрлі тегтер бейнелеу кезінде бірдей нәтиже көрсетеді.

Бейнелеу формасын басқару тегі

Курсив, асты сызылған, жоғарғы индекс, төменгі индекс, үлкен шрифт, кіші
шрифт, қызыл, көк, әртүрлі комбинациялар – бетті көркемдеуге және
функциональдауға мүмкіндік береді. Internet Explorer және Netscape
Navigator Face= атрибутының көмегімен шрифты анықтауға болады. Енді бір
бетке бірнеше шрифт түрлерін біріктіруге болады.

SIZE=атрибуты

тегіндегі SIZE=атрибуты берілген областа мәтін мөлшерін сұрауға
мүмкіндік береді. Егер сіз барлық беттің шрифт мөлшерін беру үшін
тегін қолданбасаңыз, онда үнсіз келісім бойынша 3
алынады.

және тегтері

және тегтері арасында орналасқан мәтін сәйкес
келеді.

COLOR=xx атрибуты

Егер біз өз бетімізді одан әрі безендіргіміз келсе, онда
тегіндегі COLOR= атрибутын қолдануымызға болады және басты шектеу
компьютердегі қолданушылардың түстер палитрасы болады. Әзірше тек қана
танымал браузерлердің шрифт түсін бейнелейді.

тегін шрифт түсін ауыстыруға қолданады.

Бейнелеу формасын басқару тегтері

|Тегтер |Мәні |
|….. |Курсив (Italic) |
|… |қою (BOLD) |
|… |Телетайп |
| … |Асты сызылған |
|… |Сызылған текст |
|… |Үлкейтілген фонт |
|… |Кішірейтілген фонт |
|_… |Жолма-жол символдар |
|^… |Жол үсті символдар |

Ақпарат типін сипаттайтын тегтер

|Тегтер |Мәні |
|… |Типографиялық қою |
|… |Цитата |
|… |қою |
|… |Мысал кодын көрсетеді (мысалы, программа коды) |
|… |Клавиатура арқылы символдарды еңгізу мысалы |
|… |Айнымалылар |
|… |Анықтау |
|… |Жақшаға алынған мәтін |

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

тегі

(Definition List:) тізіміндегі тегті қолдану қарапайым мәтіндік
редакторда шегіністі қолдануды еске түсіреді. тегі мәтінді форматтау
үшін құрылған, оңға қарай үлкен шегініс арқылы анықталады. тегі
номерсіз шегінетін жеке абзацтар және маркерлер құруға арналған. Шегініс ол
жақтан басталады. Егер сіздің бетіңізде бірнеше тегі бар болса, онда
мәтін ақырын оңға қарай жылжи бастайды. Анықтау соңында жабылған
тегін қойыңыз. Ұмытпаңыз, тегі тек қана абзацтың сол жақ шекарасын
жылжытады.

Табуляция

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

Ең қарапайым, тегін жазу, онда n жаңа абзацтың алдындағы n-
бос орындар санын анықтайды. n-бос орын – өлшеудің типографиялық бірлігі,
сіз қолданатын шрифтағы n әріпінің енімен бірдей. Соған сәйкес тегі ені 4 n-бос орын болатын табуляция символын алады.

Егер сіз бірнеше орынға берілген мөлшерде табуляция символын қолданғыңыз
келсе, онда оның мөлшерін беретін орынға тегін ID= атрибутымен бірге
қойыңыз, мысалы, соған сәйкес:

Енді беттің кез-келген жеріне жазса жеткілікті, және
табуляция символы TABONE тең болады. Сәйкесінше TABTWO, TABTHREE, TABFOUR
ұқсас тілімен құруға болады.

тегін мәтінде және графикте орналастыруда қолдануға болады.

Тізім

Тізімдер мәтін құрылымының негізгі құралдары болып табылады және
белгілеулердің барлық тілдерінде қолданылады. HTML-де келесі тізім
түрлерінен тұрады: номерленбейтін тізім (реттелмеген), номерленетін тізім
(реттелген) және анықтамалық тізімі. Номерленбейтін тізім тегі (Unordered
Lists ) және номерленетін тізім тегі (Ordered Lists ) – бұл HTML
негізі. HTML номерленбейтін тізімде маркердің әртүрлі типін таңдауда тізім
тегіне бірнеше атрибуттар қосады. Тізім ортасындағы маркер типін ауыстыру
үшін мынадай (List Item) тегіне атрибут қосуға болады. Жаңа атрибут
пайда болған кезде, тізімде қалған маркерлер де осындай түрді алады.

тегі

Номерленбейтін тізім. Номерленбейтін тізім мәтін типін құруға арналған.

тізімнің бірінші элементі

тізімнің екінші элементі

тізімнің үшінші элементі

Берілген тізім келесі түрде жазылады:

тізімнің бірінші элементі

тізімнің екінші элементі

тізімнің үшінші элементі

және тегі – бұл номерленбейтін тізімнің басы және соңы,
(List Item) тегі тізім элементінің тегін береді. Осы тегке қосымша,
тізімді атауға арналған - LH (List Header) бар. Келесі түрдегі
номерленбейтін тізімді бейнелейтін мысал келтірейік:

тегі

Горизонтальды сызып алу (horizontal rule) құжатты бөлікке бөлу үшін
қолданылады. Бір ғана тегі арқылы бетке мүлдем өзгеше түр беруге
болады. тегін тәжірибеде көріңіз және сонда сіз қолданып жүрген
сызықтан өзгеше сызық аласыз.

тегі

Форматтаусыз мәтінді бейнелеу.

тегі

тегі оған қосылған мәтіннің жыпылықтауын туғызады.

Гипермәтіндік сілтеме

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

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

Дәріс №11-12 Өзін-өзі тексеру сұрақтары немесе тесттер
1. html-құжатының құрылымы. Беттің құрылымдық элементтері.Элементтер
типі.
2. WWW-сервисінің жұмыс тәртібі. Сервер және клиент арасында мәлімет
алмасу. Формалар.

Дәріс №13-14. WEBТЕГІ ГРАФИКА
• Графика өлшемдерін қалай беруге болады;
• Активті бейнелер;
• Активті бейнені қалай жасауға болады;
• Сервердегі активті бейнелер;
• Клиенттегі активті бейнелер;
• Серверде де, клиентте де жұмыс істейтін активті бейнелер.

Графика өлшемдерін қалай беруге болады

Webтегі ең кең таралған графикалық форматтар болып GIF және JPEG
форматтары болып табылады. Web – бетке бейне қою үшін ең алдымен оны салып
алу қажет немесе дайын бейнені алуға болады. Сурет салудың кез-келген
программасында қарапайым бейнені салу және оны қажет етілген форматқа
сақтау қиынға түспейді. Егер программа бұл форматты қабылдамаса, онда
файлды өңдеу қажет. Бір графикалық форматтың басқа форматқа өңделуіне
арналған бірнеше программалар бар. Суреттерді әртүрлі программалық
пакеттерден немесе Internet Web – беттерінің бірінен алуға етуге болады.
Егер браузер Web – бетті бейнемен бірге шығарса, сәйкес графикалық файл
компьютер жадысында уақытша сақталады. Браузердің көпшілігінде файлды үнемі
локальды дискіде сақтауға рұқсат беретін командалары бар.Графикалық файлды
алудың бірнеше басқа да варианттары бар:

Бейнелер өзінің ақпараттылығымен пайдалы болуы мүмкін және Web – бетке
көз тартар түр береді. Бейнелерді қолдануда кең таралған жағдайларды
қарастырайық:
- іскерлік беттегі компанияның логотипі;
- жарнамалық хабарландыруға арналған графика;
- әртүрлі суреттер;
- диаграммалар және графиктер;
- шығармашылықтар шрифтер;
- бет авторының қолы;
- графикалық жолдың горизонтальды бөлінді сызық ретінде қолданылуы;
- әдемі маркерленген тізімдерді құруға арналған графикалық маркерлердің
қолданылуы.

Енді Web – бетке бейнені қалай қою керек екендігін қарастырайық. HTML
тегі болып браузер бейнені шығаруды талап ететін келесі ортақ
форматы табылады:

Тұйықтаушы тег талап етілмейді.Мұндағы SRC – (SouRCe)бастауды
білдіреді, ал файлдың аты шығарылған графикалық файлдың атын білдіреді. Web
– беттегі бейнелер қарапайым мәтін сияқты гипермәтінді сілтемелер ретінде
қолданылуы мүмкін.. Бетті оқушы бейненің үстінен шертеді де, басқа бетке
немесе бейнеге ауысады. Гипермәтінді белгі сияқты бейнені белгілеуде,
мәтінде де қолданылатын тегі қолданылады, бірақ және арасына
бейнесінің тегі қойылады.

Бұндай бейненің гипермәтінді сілтеме ретінде қолданылуы қосымша рамка
ретінде.

Шектелген тікбұрыштар және ALT= атрибуттары

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

Графика өлшемдерін қалай беруге болады?

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

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

ALT= атрибуты

тегінің ALT= атрибуты қолданушыларға, тек мәтінді көретін
браузерлер (егер браузерде графика режимі өшіп жатса), графиканың бетте
орналасуы немесе оның мақсаттары туралы ақпарат алуына мүмкіндік береді.

Microsoft Internet Explorer бейне шектелген тікбұрыштағы ALT= атрибутынан
мәтінді көрсетеді. Егер Auto Load Image режимі қосылып тұрған жағдайда ғана
Netscape Navigator бұл мәтінді шығарады.

тегі ALT= атрибутымен бірге келесі түрде болады:

Активті бейнелер

Активті бейнелер (image maps) немесе бейнелер, тышқан батырмасын
сезушілер сіздерге туынды формасындағы графикалық мәзірді өз
тармақтарыңызда құруға мүмкінді береді. Мұндай мәзірді қолдану арқылы
оқушылар барлық тұйықтарда және сіздің Web – тармақ даңғылыңызда серуендей
алады. Активті бейнелер - бұл басқа беттердің URL – на немесе
тармақтарына сілтемеленетін активті облысты деп аталатын жай сурет. Келесі
түрде жұмыс істейтін бейне бар: қолданушы активті бейнелердің IMG тегіндегі
ISMAP атрибуты көмегімен анықталған суретті тышқанмен шерткен кезде, шерту
координаттары Web- серверге беріледі. Сервер картада жіберілген координатты
құрайтын активті облысты іздейді. Егер мұндай облыс бар болса, онда
берілгендер URL картасында активтенеді және қолданушының браузері жаңа
бетке көшеді.

Активті бейненің көмегімен сіз бірден екі есепті шеше аласыз:
өзіңіздің Web – тармағыңыздың мәзірін құра аласыз және онда графика
орналастыра аласыз.

Активті бейнені қайда қоюға болады: серверде немесе клиентте?

Активті бейненің 2 типі бар: серверде және клиентте. Бірінші типтегі
бейнені сервер URL активті облыстың сәйкес берілгендерін табу және
браузерге қажетті бетті браузерде қолданады. Клиенттік машинада жұмыс
істейтін активті бейнелер HTML бетіндегі активті облыстар жайлы ақпарат
береді. Сондықтан браузер қандай облыс активті екенін өзі түсіндіреді және
серверден қажетті бетті сұрайды.

Активті бейнені қалай жасауға болады

Активті бейненің құрылу процесі 2 сатыдан тұралы. Ең алдымен сіз
активті етіп жасайтын суреттің облысын анықтауыңыз қажет, содан кейін оны
сілтемелермен басқа URL – апаруыңыз керек. Мұның бәрін активті облыстың
координат бұрыштарын анықтау арқылы жасауға болады, бірақ қандай да бір
программамен, мысалы, MapEdit – ті қолдану оңайға түседі.

Картаны анықтау оңай. MapEdit – та сіз құрғалы отырған активті
облыстағы бейнені құрайтын файл ашу қажет, одан кейін тышқанды апарып шерту
арқылы облыс шекарасын береміз. Программа файлды активті облыстың
белгіленген шекарасын автоматты түрде генерациялайды. Содан кейін осы
облыспен URL-ді жазу қажет. Бейненің кез-келген орнында тікбұрыш, көпбұрыш
немесе шеңбер формасында активті облыстар салуға болады және әрқайсысына
URL-ді анықтау керек. Активті облыстар қиылысуы мүмкін, бірақ бұл жағдайда
мәселелер туындайды. Оқушы дұрыс сілтемені таңдап отырғанына сенімді болу
үшін облыстар арасына біраз орын қалдыру қажет;

Активті облыстың шекаралары тікбұрыш, көпбұрыш немесе шеңбердің центрі
мен радиусының координаттар бұрышымен беріледі. Бұл параметрлер картаға
(Map-файл) жазылып отырады.

Активті бейнені құрып болғаннан кейін, сіз алынған файлды NCSA немесе
CERN форматында сақтай аласыз. Егер ол серверде немесе CSIM форматында
жұмыс істесе және егер ол клиенттік машинада функционирленсе. Ал қалған
барлық жұмысты MapEdit программасы орындайды. Ол картаны серверде құрады
немесе картаны клиент жақтағы сіз көрсеткен HTML файлында кірістіреді.
Егер сіз активті бейнені клиентте жасайтын болсаңыз, онда MapEdit
тегтері үшін ғана берілгендерді қояды. USEMAP атрибутымен бірге бейне
тегін өзіңіз беруіңізге тура келеді және оны тегінен кейін бірақ
аласыз. USEMAP атрибутында карта атының алдынан # символын қоюды ұмытпаңыз:

Сервердегі активті бейнелер

Бұрын қолданыста болған активті бейненің құрылуында (html 2.0 үшін)
IMG тегіндегі ISMAP атрибутының қолданылуы талап етіледі. IMG тегі бейнеге
қатысты, оны бастапқы және соңғы тегі арасына файл – картаның
сілтемелеріне орналастыру қажет. Сізге HTML – файлына мынадай жолдарды
енгізу керек:

ISMAP атрибуты браузерге берілгендер бейнесі активті екенін көрсетеді.
Егер оның қандай да бір облысында тышқан шертпесі пайда болса, онда ISMAP
атрибуты көмегімен серверге координат шертпесін құрайтын хабарлама
жіберіледі.

Клиенттегі активті бейнелер

Алдыңғы бөлімде жазылған бейнелерге қарағанда, клиенттегі активті
бейнелер сервердің программалық жабдықтарына тәуелсіз жұмыс істейді және
сіз өз файлдарыңызда басқа серверге ауыстырсаңыз да функционирленуін
тоқтатпайды. Бұндай бейнелерге 2 нәрсе қажет: HTML 3.0 қолдайтын браузер
және HTML файлында жазылған карта туралы ақпарат.

Серверде де, клиентте де жұмыс істейтін активті бейнелер

Сіздің серверде де, клиент – машинасында да жұмыс істейтін бейнемен
жұмыс істегіңіз келетін шығар.

Серверде де, клиентте де активті бейнелер құрғаннан кейін оларды бір
HTML файлында біріктіру қиын емес. Ол үшін HTML документіне сервердегі
активті бейне үшін жасауға арналған сол жазуды апару қажет. IMG тегіне
USEMAP= атрибутын қосуды ұмытпаңыз. USEMAP= атрибуты ISMAP тегіне қарағанда
жоғары приоритетті болып табылады. Егер браузер клиентте жұмыс істейтін
активті бейнені қолдаса, онда бұл атрибутты ол мойындайды. Бұндай
бейнелерді білмейтін браузер USEMAP= атрибутына әсет етеді.

Дәріс №13-14. Өзін-өзі тексеру сұрақтары немесе тесттер
1. XML және HTML. XML Синтаксисі. XML-дің HTML-ден айырмашылығы. DTD.
2. XML- құжатының визуалды тәсілдері.

Дәріс №15-16. HTML-ДА КЕСТЕНІҢ ЖАЗЫЛУ ТӘСІЛДЕРІ

• , , , ,
.
• NOWRAP, COLSPAN=, ROWSPAN=, WIDTH=, UNIT=, COLSPEC=, DP=,
СELLPADDING=, ALIGN= және VALIGN=, BORDER=, CELLSPACING= атрибуттары.

, , , ,

Кестенің жазылуы үшін тегі қолданылады. тегі басқалар
сияқты жолды кестеге дейін және кестеден кейін автоматты түрде аударады.

тегі.

тегі (Table – Row сөзінен қысқартылған) – кестенің жолын
құрады. Егер кесте екі жиын тегінен құралса, онда ол екі жолдан
да тұрады. Сіз бір жолға орналастыратын бүкіл мәтін, басқа тег және
атрибуттар тегтерінің арасына орналасуы қажет.

тегтерімен қоршалуы керек.
Жолдағы тегтерінің саны ұяшық санын анықтайды.
тегтерінің бес сыңарлы жолы бес ұяшықтан тұрады.

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

тегі.

Кесте жолының ішінде әдетте берілгендер ұяшығы орналасады. Мәтін
немесе бейне құрайтын әрбір ұяшық тегі.

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

тегі.

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

NOWRAP, COLSPAN=, ROWSPAN=, WIDTH=, UNIT=, COLSPEC=, DP=, СELLPADDING=,
ALIGN= және VALIGN=, BORDER=, CELLSPACING= атрибуттары

NOWRAP атрибуты .

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

COLSPAN= атрибуты.

және тегтері COLSPAN= атрибутының көмегімен модифицирленеді
(Column Span, бағандардың бірігуі). Егер сіз қандай да бір ұяшықты
кеңейткіңіз келсе, онда осы COLSPAN= атрибутын қолдануға болады.

ROWSPAN= атрибуты.

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

WIDTH= атрибуты.

WIDTH= атрибуты екі жағдайда қолданылады.Оны барлық кестенің енін
беруде тегіне қоюға болады және ұяшық тобының немесе ұяшық енін
беруде немесе тегтерінде қолдануға болады. Енін пиксельмен
немесе пайызбен көрсетуге болады. Мысалы, егер сіз тегінде
WIDTH=250 деп берсеңіз, онда сіз монитордағы бет өлшеміне тәуелсіз ені 250
пиксель кестені аласыз. тегінде WIDTH=50% беру кезінде, кесте
экрандағы кез келген өлшемдегі бейнеде беттің жарты енін алып тұрады.

UNIT=атрибуты.

тегінің UNIT=атрибуты барлық кесте мен оның жеке бағандарының
өлшемдерін көрсетуде қолданылатын өлшем бірлікті анықтайды. UNIT=атрибуты
үш мәнді қабылдауы мүмкін:

UNIT=EN - үнсіздік бойынша қосылатын мән және en - бос орынға тең
өлшем бірлікті береді. Еn - бос орын - әріпінің еніне тең типографты
өлшем бірлік. Бос орынның нақты өлшемі таңдалған шрифтке тәуелді: ұсақ
шрифтке қарағанда ірі шрифтке en - бос орын көбірек беріледі. Әдетте en-
бос орын шрифт өлшемінің жартысына тең. Мысалы, 12 - пунктті шрифт үшін en
- бос орын 4 - пунктті алады.

UNIT=RELTIVE барлық кесте еніндегі баға енін процентпен беру үшін
қолданылады. Бұл тәсілді мүмкіндігінше проценттегі енді көрсетудің орнына
қолдануға болады. Қолданылатын бірлікті беру кезінде енгізілген сандар
проценттердегі бағандар ені болып қабылданады.

UNIT= PIXELS – бұл мән экрандағы бағанның енін нақты білуде қолданылады.
Бұл жағдайда оны пиксельмен беру оңай. Мысалы, кестенің енін 340 пиксельмен формалайды.

COLSPEC=атрибуты.

UNIT=атрибутымен бірге қолданылатын COLSPEC=атрибуты кестенің әрбір
бағаны қанша орын алатынын және онда берілгендер қалай тегістелетінін
анықтайды. Тек тегінде ғана қолданылады.

COLSPEC= барлық бағанды санайды және әрқайсысы үшін тегістеу мен өлшем
береді. Баған үшін (немесе ұяшық үшін) тегістеудің 5 тәсілі бар: L – сол
жақ жиек бойынша, C – центр бойынша, R – оң жақ жиек бойынша, J – оң және
сол жақ жиек бойынша және D – ондық үтір бойынша тегістеу. Егер сізде 5
баған болса, онда оның енімен әрқайсысын тегістеуді келесідей анықтауыңызға
болады.

DP=атрибуты.

DP=атрибуты (Decimal Point, ондық белгі) ондық бөлгіштің толық бөлімін
бөлуде қолданылатын символды анықтайды. DP= “.”(үнсіздік бойынша) ондық
символ ретінде нүктені көрсетеді. DP= “,” үтірді береді.

Бос ұяшықтар.

Егер ұяшық берілгендерді қамтымаса, онда оған шекарада қажет етілмейді.
Егер сіз ұяшықтың берілгендері болмай, шекарасы болғанын қаласаңыз сіз оған
көрсетілім кезінде көрінбейтін бір нәрсе қоюыңыз қажет.
бос жолын
қолдануға болады. Алынған ұяшыққа ешқандай берілгендерді енгізбей-ақ,
олардың ендерін пиксельмен анықтап бос бағандарды да беруге болады. Бұл
тәсіл бетке мәтін мен графиканы қою кезінде пайдалы болуы мүмкін.

СELLPADDING=атрибуты.

СELLPADDING=атрибуты - ұяшық берілгендерімен оның шекарасы арасындағы бос
кеңістіктің енін анықтайды, яғни ұяшық ішінен алаң береді.

ALIGN= және VALIGN= атрибуттары.

, және тегтерін ALIGN= және VALIGN= атрибуттарының
көмегімен модифицирлеуге болады. ALIGN=атрибуты мәтін және графиканың
горизонталь бойынша тегістелуін анықтайды, яғни оң және сол жақ жиек
бойынша, центрі бойынша тегістеу. Горизонталь тегістеу бірнеше тәсілмен
берілуі мүмкін:

ALIGN=BLEEDLEFT – ұяшықтың берілгендерін сол жаққа тығыздап қысады.

ALIGN= LEFT - СELLPADDING=атрибутымен берілген ұяшықтың берілгендерін
жылжыту есебімен сол жаққа тегістейді.

ALIGN=CENTER – ұяшықтың берілгендерін центр бойынша орналастырады.

ALIGN=RIGHT - СELLPADDING=атрибутымен берілген ұяшықтың берілгендерін
жылжыту есебімен оң жаққа тегістейді.

VALIGN= атрибуты – мәтін және графиканы ұяшық ішінен вертикаль бойынша
тегістейді. Вертикаль тегістеу келесі тәсілдермен берілуі мүмкін:

VALIGN=TOP – ұяшықтың берілгендерін оның жоғарғы шекарасында тегістейді.

VALIGN=MIDDLE – ұяшықтың берілгендерін вертикаль бойынша
орталықтандырады.

VALIGN=BOTTOM - ұяшықтың берілгендерін оның төменгі шекарасында
тегістейді.

BORDER=атрибуты.

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

CELLSPACING= атрибуты.

CELLSPACING= атрибуты – ұяшықтар арасындағы аралық енді пиксельмен
анықтайды. Егер бұл атрибут берілмесе, онда үнсіздік бойынша 2 пиксельге
тең көлем беріледі. CELLSPACING= атрибутын мәтін мен графиканы өзіңізге
қажетті жерге орналастыру үшін қолданылады. Егер сіз бос орын қалдырғыңыз
келсе, онда ұяшыққа бос орынды жазуға болады.

Дәріс №15-16. Өзін-өзі тексеру сұрақтары немесе тесттер
1. Статикалық және динамикалық құжаттарды өңдеудегі ерекшеліктер.
2. Белгі тілдердің жалпы принциптері.

Дәріс №17-18. БЕТТІҢ ДИЗАЙНЫНДА КЕСТЕЛЕРДІ ҚОЛДАНУ
• Көптүсті кестелер құру.
• Netscape Navigator -дағы түрлі-түсті шекаралар.

Көптүсті кестелер құру

Кестелердің жақсы бір қасиеті – ол құрып отырған кестенің шекараларын
көрінбейтін етіп жасауға болады. Ол <ТАВLЕ> тегінің көмегімен бетте текст
пен графиканы кірістіре отырып әдемі орналастыруға болады.Осы күнге дейін
<ТАВLЕ> тегі HTML-де өңдеудің жалғыз қуатты құралы болып отыр. Web-
беттердің дизайнерлері қазір практикалық түрде баспа беттерін құрушылар
сияқты <бос кеңістікті > қолдануда. Кең көлемді кестелер басқаларға
қарағанда текстердің Web –беттерде иерархиялық орналасудан алшақтатады.

Егер браузер кестені қабылдаса, онда кестенің көмегімен алынған
эффектілерді дұрыс көрсететін болады.

Түрлі-түсті кестелер құру.

Жетекші браузерлер бірнеше түстерді бейнелейді. Кестені бояудың бірнеше
әдістері бар. Ол әдетте қолданылатын браузерге байланысты.

Netscape Navigator -дағы түрлі-түсті шекаралар

Сіз кестені жақтаумен әсемдеп қана қаймай, оған фон мен текстің түсінен
әлдеқайда жақсы түс беруіңізге болады. Қарапайым GIF (немесе өзіңіз фон
ретінде қойғыңыз келген кез-келген GIF,) құрыңыз және оны <ВODY> –тегінде
фон ретінде анықтаңыз.Сосын бет фонының түсін беріңіз. Нәтижесінде сіздің
<ВODY> –тегіңіз мына түрде болады:

Сіз екі қабаттан тұратын фон құрдыңыз- GIF және берілген түс. Нәтижесінде
фондық түс кестенің барлық шекараларында және көлденең (<НR>)жолақтарда
көрінетін болады. Сіздің фондық GIF –іңіз сұр түсті болуына
тәуелсіз,кестенің түрлі-түсті сызықтары мен шекаралары ерекшеленіп тұрады.
Егер фондық GIF күрделі емес болып құрылса,бетті жүктеу уақыты кішкене
өседі.Төмендегі мысалда –дегі түстер әсіресе кестелерде кең көлемде
қолдануға мүмкіндік беретінін көрсетеді.

Дәріс №17-18. Өзін-өзі тексеру сұрақтары немесе тесттер
1. Форма мен мазмұнның ортогональдық принципі
2. HTML –дің ерекшеліктері
3. XML –дің ерекшеліктері

Дәріс №19-20. ФРЕЙМДЕР
• Фрейм дегеніміз не?
• Фреймдер не үшін қолданылады?
• Фреймдер қалай жұмыс істейді?
• Фреймдік құрылым жасау
• Берілгендері бар фреймді дайындау

Фрейм дегеніміз не?

Фрейм дегеніміз – сурет айналасындағы жақтау, терезе немесе бет деген
сөздермен мағыналас. -деген тегті енгізеді, НТМL-беттің дизайнері
экран браузерін бөліктерге бөледі. Нәтижесінде бетті қарап отырған адам
оның бөліктерін басқа бөліктеріне тәуелсіз қарай береді. Фреймдерді
қабылдайтын браузер әр түрлі беттерді түрлі секцияларға , фреймдарға жүктеп
тастайды. Мысалы,сіз бетті өзіңіздің фирмалық белгіңізді экранның жоғарғы
бөлігіне орналастырып, қалған бөліктерін қолданушы өзі ары қарай қарапайым
тәсілмен ашып отыратындай етіп құруыңызға болады. Жанынан навигациялық
батырмалар қоюға болады. Оның көмегімен оқырман осы батырманы тышқанмен
шерткенде орын ауыстырылмай, эканның белгілі бір бөлігі ғана қозғалады.

Фреймдер не үшін қолданылады?

Навигация құралдарының немесе фирмалық белгінің фиксациясы – фреймдерді
қолданудың көрнекі тәсілі болғаны оларды толық қолдану деген сөз емес.
Фреймдерді қолдануда дизайнерлердің ойына ең бірінші саналып өткен шешімдер
келеді. Бірақ браузер экранына фрейм қойылған сайын сіз берілгендерді
орналастыруға арналған территорияны қысқартып отырасыз. Сіз фреймдерді
неғұрлым көбірек кіргізсеңіз, пайдалы кеңістік соғұрлым азаяды және сіз осы
әрекетіңізбен фреймдері бар Web-беттердегі навигациялармен таныс емес өз
оқырмандарыңызды шатастырасыз.

Мысалы,фреймде ең қажетті беттердің алғашқы бірнеше деңгейлерінде
компанияның логотипін сақтап, ал негізгі берілгендерді фреймдерсіз
көрсеткен дұрыс.

Фреймдер қалай жұмыс істейді?

Фреймдер күрделі болғанымен оларды түсіну оңай, егер кесте ұяшықтарына
аналогия жүргізсе.Фреймдердің экранда орналасуы ұяшықтардың кестеде
орналасуы сияқты: тегтер мен атрибуттар кестедегі сияқты жұмыс атқарады.
Бірақ, беттегі бірлік фреймдер мен кесте ұяшықтары арасындағы аналогияның
маңыздылығымен қоса оның айырмашылығын ажырата білген жөн.Ұяшық
берілгендері кестесі бар HTML-бетінің кодында берілген. Кестенің
берілгендерін құрайтын мәтін немесе графика, HTML-бетіндегі кестені
бейнелейтін тег немесе атрибут сияқты енгізіледі. Керісінше, фреймдері бар
экран HTML-бетте (frameset ) деп аталатын сөзбен бейнеленеді. Фреймдердегі
берілгендер кез - келген жерде – басқа каталогта, локальді серверде немесе
желінің жойылған түйіндерінің бірінде орналасқан бөлек HTML-бет. Фреймдік
құрылым фреймі бар экранды ұйымдастыру тәсілін және әрбір фреймнің бастапқы
берілгендері қайда орналасқанын ғана анықтайды.Барлық фреймдер үшін олардың
берілгендерінің орнын бейнелейтін URL болады. Ереже бойынша фреймдік
құрылымы бар бетте олардың берілгендері болмайды.Мұндай бет үлкен емес – ол
экранны ңтек кадрлық құрылымын ғана анықтайды.Құжат фреймдерге жүктелген
уақытта сіз осы құжаттағы сілтемеге тышқанмен шертіп, басқа кадрлардағы
фреймдік құрылымда жасалған бір - бірімен байланысқан құжаттарды
шақыруыңызға болады.

Фреймдері бар қарапайым беттерді құру.

фреймі бар НТМL беттерді құру және негізгі тегтер мен атрибуттардың
қажеттілігін жақсылап түсіну үшін фреймдері бар қарапайым жолдар жұбын
құрайық.

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

Фреймдік құрылым жасау

Алдымен біз фреймдердің қайда орналасуын және олардың қандай мөлшерде
болатын беттің жалпы түрін ойластыруымыз қажет.Содан кейін олардың мазмұны
жайлы қарастырамыз.Төменде тегінің көмегімен құрылған қарапайым
фреймдік құрылымның коды көрсетілген.Мынаған назар аударыңыз:фреймдік
құрылымы бар бетте <ВОDY> тегі жоқ.

Берілгендері бар фреймді дайындау

Енді берілгендері бар фрейм жасайық.Сол жақ фреймге оң жақ фреймдегі екі
беттің арасында ауысып тышқанмен шертетін menu.html бетін құрайық.
menu.html файлы бұл – мазмұн ретінде құрылған қарапайым НТМL-бет. Негізінде
біз мазмұны бар дайын бетті алып оны қолдана беруімізге болады. Бұл
фреймнің жіңішке жіне биік екенін ұмытпаңыз, сондықтан оған жүктелетін бет
соған сәйкес жобалануы қажет. Енді сілтемені тышқанмен шерткенде басқа
беттердің қайда пайда болатынын анықтауымыз қажет. Біз олардың оң жақта
пайда болуын қалағандықтан сілтеме тегіне ТАRGET= (TARGЕТ="main") атрибутын
енгізейік. Бұл қолданушы сілтемені басқан кезде шақырылып отырған бет main
фреймінде пайда болады дегенді білдіреді. Біз main фрейміндегі барлық
беттерді бейнелегендіктен, мазмұндағы барлық сілтемелердің тегіне
ТАRGЕТ="main" атрибутын қосамыз, сонда сол жақтағы фреймде қай жерде
тышқанмен шертсек, сол жерде бет пайда болады, ал ол бізге керек емес,
бірақ басқа жағдайда олай жасаған керек те болып қалады. Мысалы, сіз жай
ғана келесі сілтемелерді шығарып беретін < Мазмұнның басқа пункттері >
сілтемесін қосуыңызға болады. Оқырмандар сілтемелердің көптігін байқау үшін
мазмұнды ұзынырақ етіп жасаған дұрыс.

main фреймін дайындау

Оң жақтағы main фреймінде HTML-беттер болады. Сіз кішірек болып
көрінетіндей терезеде жобалағаныңыз дұрыс, себебі экранның белгілі бір
бөлігінде мазмұнның сол жақ кадрлары орналасады. Но больше эти страницы
ничем не примечательны.

тегін пайдалану.

Сіздің көптеген қолданушыларыңызда әлі фреймдермен жұмыс істей алмайтын
браузерлер бар. Сол себепті сіздің негізгі беттеріңізді фреймсіз ұсынған
жөн. Егер сіздің фреймдік құрылымды бетіңізде ескірген браузерлі оқырман
болса, онда осы бетте орналасқан < NOFRAMES >және </ NOFRAMES >тегтерінің
арасындағылардың барлығы өте жақсы көрініп тұратын болады - браузер жай
ғана фреймдерді елемейтін болады. Сондықтан міндетті түрде <ВODY></ВОDY>
тегтерін пайдалану керек. Әйтпесе, сіз экранды қайта фреймдерсіз құруыңыза
тура келеді. Фреймдік бетке No Frames (Фреймсіз) батырмасын кірістіруге
болады. Оның бағыты белгілі. Мұндай әдіс ойға қонымды және тез жүзеге
асады.

Дәріс №19-20. Өзін-өзі тексеру сұрақтары немесе тесттер
1. Қолданушыдан қайтымды ақпаратты алудың мақсатқа лайықтылығы
2. Қонақ кітап/форумды құру.

Дәріс №21-22. ФОРМАЛАР
• Сіздің формаңыз жақсы көріну үшін не істеу керек?
• Формаларды жұмыс істеуге мәжбүр ету.

Сіздің формаңыз жақсы көріну үшін не істеу керек?

Интерактивті формалардың көмегімен оқырмандар Web-бетті құрушылармен
оңай хабарласа алады. Форма мен <mailto:> тегінің қарапайымдылығының
арқасында Web-түйіндер мен олардың оқырмандарының арасында екіжақтылы
диалог мүмкін болды. Бұл Web- навигаторларға коммерциялық мүмкіндіктер мен
қызықты болашаққа жол ашады.Өкінішке орай, көптеген ескірген браузерлер
<mailto:> тегін қабылдамайды.

Сіздің формаңыз жақсы көріну үшін неістеу керек?

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

Формаларды жұмыс істеуге мәжбүр ету

Сіз күтіп отырған бөлім осы шығар – енгізілген берілгендерді формамен
серверге қалай сілтеуге болады. Шындығында олай жасау өте оңай. Ең бірінші
мәселе – ол берілгендерді қайда жіберу, соны түсіну. Сіз <FORM> тегінде
АСТION= атрибутын жазасыз және енгізілген берілгендерді өңдеп, олармен
пайдалы бір нәрсе істейтін URL программаға сілтеме жасайсыз.

Дәріс №21-22. Өзін-өзі тексеру сұрақтары немесе тесттер
1. Қолданушының ақпаратты енгізуі және өзгертуі
2. Форма – қолданушы мен қарым қатынас жасаудың негізгі элементі.

Дәріс №23-24. АППЛЕТТЕР
• АРРLЕТ ұғымы.
• АРРLЕТ контейнерінің түрі
• РАRАМ контейнерін қолдану

АРРLЕТ ұғымы

Желі ақылы қолданушы компьютеріне кішкене ұялы телефондардың программасын
енгізіп, олармен жұмыс істеу әрине Java көмегімен орындалады. Бұл
программалар Java терминологиясында апплеттер (алмалар) деп аталады. НТМL-
құжаты мәтініне апплеттерді шақыру үшін АРРLЕТ контейнері енгізілді, ол
<аррlet> тегімен басталып, </аррlet>тегімен аяқталады. Апплеттерге
сілтемелері бар жалпы құжат түрі төмендегі мысалдағыдай болады.

Бұл мысалда құжат тақырыбы және ( H1 тегі) және қисық сызықтан кейін ені
200 пиксель және биіктігі 100 пиксель болатын апплет өрісі басталады.
Берілген өріске hello (файл hello.class) деп алалатын аррlet жүктеледі.
аррlet контейнері тегтердің басы мен аяғының арасындағы мәтін ны
қолданбай, браузер көмегімен бейнеленетін құрылған мәтіндер мен
контейнерлерді орналастыру үшін қолданылады.

<HTML>

<HEAD>

<TITLE> applet-ке сілтемелері құрылған құжат.

</TITLE>

</HEAD>

<H1> hello Java- апплетімен құрылған құжат </H1>

<HR>

Егер сіздің браузеріңіз Java қабылдаса, Аррlet осы орында бейнеленеді

</APPLET>

<HR>

</BODY)

</HTML>

Мұндай құжатқа сілтеме нәтижесінде біріншіден құжат мәтіні жүктеледі,
сосын аррlet контейнері табылып, апплет кодының жүктелуі басталады.
hello.class файлы НТМL-файлы қайда орналасса, ол да сонда орналасуы керек.
Апплетті қабылдаған соң браузер өз жұмыс алаңында оған орын қалдырады,
содан кейін барып оны орындауды бастайды.

АРРLЕТ контейнерінің түрі

Жалпы жағдайда АРРLЕТ контейнері мына түрде болады:

<applet

[codebase = codebase url]

code = applet.class

[alt = text]

[name= applet name]

width = number of pixels

height = number of pixels

[align = alignment]

[vspace=number of picsels]

[hspace=number of pixels]

[<param name=param name value=param value>]

[HTML text]

</applet>

Параметр соdebase параметрі апплет кодын іздеуіне арналған базаға сұрау
қояды, соdе – бұл сlass кеңейтілуі болуы тиіс апплет файлының аты, аlt -
альтернативті текст – апплеттің орындауы аяқталған жағдайда бейнеленеді,
name – аррlet контейнерінің аты, контейнерге сілтеме үшін қолданылады,
widthт - апплетаны бейнелеудің облыс ені, height – апплетаны бейнелеудің
облыс биіктігі.

РАRАМ контейнерін қолдану

РАRАМ контейнерін қолдану, параметрлерді апплет ішіне және НТМL-құжатқа
беруді қамтамасыз етеді. Бұл командалық жолдың әр түрлі аргументтерімен
команданы шақыру болып табылады. Параметрлерді апплет ішінде алу үшін
getParametr () әдісін пайдаланған жөн.

АРРLЕТ контейнерінің атрибуттарынан соdе, width және height ғана
міндетті болып табылады. Қалған басқа атрибуттарды (олар тік жақшаға
алынған "[ ]") түсіре беруге болады. Java-программаларды өңдеу жүйелерінің
көпшілігі НТМL-құжатты, дәлірек айтқанда, Java-апплеттерді тестілеу үшін
олардың макеттерін генерациялайды. Бұлай мысалы үшін, IВМ- нің АDК (Аррlet
Development Kit) компаниясында жасайды.

аррlet шақырылған URL құжатты алу үшін , getDocumentBase және getCodeBase
әдістерін қолдануға болады. Оның біріншісі құжатқа арналған адрес базасын
анықтаса, екіншісі сол уақытта апплеттің базасын анықтайды. Мұндай
әдістерді аррlet құжаты орналасқан берілгендермен (мәтін немесе графика)
жұмыс істегенде қолданады.

Дәріс №23-24. Өзін-өзі тексеру сұрақтары немесе тесттер
1. www- беттердегі көріну мен позициялауды басқару.
2. html-беттердегі апплеттер және басқа объектілер.

Дәріс №25-26. СТИЛЬДЕРДІҢ КАСКАДТЫ КЕСТЕЛЕРІ (CSS)
• Жаңа HTML – контейнерлер.
• HTML контейнерлерінің қасиеттері.
• Контейнерлердің қасиеті.

Жаңа HTML – контейнерлер

Стильдердің каскадты кестелері HTML 3.0. спецификациясының ішінде
өңделген w3c (www Consorciom) да ұсынылған.Бірақ, олар 1997жылы ғана шынайы
әсер етуші навигатор болып жасалды. HTML – тілінде оларды қолдану Netscape
Navigator 4.0 және Internet Explorer 4.0 версиясымен ғана қолданыла алады.

Кесте негізіндегі идея өте қарапайым. 4.0 – ші версияға HTML тілі
құжаттарды контейнер түріне келтіруге сүйенетін белгілеу тіліне айналды,
яғни құжат дегеніміз – бұл бір біріне салынған көптеген контейнерлер
жиынтығы, олардың әрқайсысының ақпаратты көрсету қасиеті бар. Көптеген
контейнерлерді біртипті контейнерлер класы деп топтауға болады, мысалы,
тақырыпша және параграфтар. Контейнер қасиеті – контейнер басындағы таг
атрибуты негізінде саналады. Сонымен қатар, көптеген контейнерлерде HTML –
дың 3.0 версиясынан бастап осы атрибуттар жинағы типтелген.

Көбінесе контейнерлер әмбебап программалау тілдерінде блоктарға
кіреді. Сондықтан контейнер қасиеті айнымалы ретінде интерпретациялауға
болады. Программалау тілдеріндегі сияқты, мысалы Паскальда, қасиеттің
жазылуын құжаттың басында арнайы секцияға жазуға болады.бұндай секциялардың
бірі – каскадты стиль секциясы. Әдетте стиль STYLE контейнерінің ішінде
жазылады.

Жалпы айтқанда Netscape тағы бір стиль кестесінің нотациясын қолдайды. Ол
Java Script нотациясы.

Стиль кестесін суреттегенде біз Netscape құжатын қолданамыз, бұл
Internet – тің ең атақты браузері. Internet Explorer w3c спецификасын ғана
қолдайды.

Бірінші мысалдан бастайық. Құжаттың тақырыбында және параграфында
жазылатын мәтін стильін суреттеу керек.

p {color blue; font – family: times; font – size:10pt;}

h1 {color: black; font – size:12pt; font – style; Arial; text – align:
center;}

</style> </head>

<Body>

<h1> Test Style Shits in Communicator </h1>

<p> This is a first part of the document

</body.

</html>

Дәл осы мысалды Java Script - нотацияда жазайық.

Tags. p. color =”blue”; tags. p. fontFamily=”times”; tags. p.
fontSize=”10pt”;

Tags. p. color=”black”;

Tags. h1. fontSize=”12pt”; tags. H1. fontStyle=”Arial”;

Tags. textAlign=”center”;

</style> </head>

<body>

<h1> Test Style shits in Communicator </h1>

<p> This is a first part of the document

</body>

</html>

Енді осы стильдерді тереңірек қарастырайық. Олардың қолдану облысы
және оларды құжатта орналастыру амалдары,

Стильдер кестесінің найда болуымен қатар тілде үш жаңа контейнер пайда
болды. Олар: STYLE, LINK, SPAN. Негізінде LINK бұл жаңа таг емес, ол ескі
тагтың жаңаша қолданылуы.

STYLE контейнері <style type=” … ”> … </style> стильдерінің жазылу
кестесін анықтау үшін қызмет жасайды. CSS спецификациясында STYLE – ды
құжаттың қандай контейнерінде қолданылатыны туралы тура айтылмайды, бірақ
мысалдарда HEAD контейнерінің ішінде осы контейнері жиі қолданылады.

LINK контейнері стильді жазу контекстінде берілген құжатқа стильдердің
жазылуымен сыртқы файлды анықтау үшін қолданылады. Мысалы, сыртқы файл
келесідей стильдер жазуынан тұрсын:

/* CONTENTS OF THE EXTERNAL STYLE SHEETS FILE CSS.HTM*/

p {color: blue; font – family: times; font – size: 10pt:}

h1 {color: black; font – size: 12pt; font – style: Arial; text – align:
center;}

/* the end of style sheets definition */

Осы стильдер жазылуын құжат тақырыбында қолдану үшін келесі тагты қолдану
керек.

</head>

<body> The body of the document should be here.

</body>

</html>

CSS.HTM файлындағы стильдің жазылуы STYLE контейнеріндегі жазылуымен
бірдей екендігін осы мысалдан көруге болады.

SPAN контейнері ағымдағы мәтін фрагментін бейнелейтін стильді анықтау
үшін қолданылады және кей жағдайларда FONT контейнеріне сәйкес. Әдетте
SPAN типографиялық эффектіге жету үщін қолданылады, мысалы абзацтың
бастапқы әрпінен жекелеу.

<HTML> <!—Author: Paul Khramtsov Date: September 19, 1997 URL:

HTTP://POLYN.KIAE.SU/INTERNET/INTRO.HTML -->

FS.all {color: red; font-size: 24pt; font-family: times;}

H1 {color: navy; text-transform: uppercase; font-size: 18pt;
font-weight: bold; font-family: times;}

H2 {color: navy; font-size: 14pt; font-weight: bold; font-style:
italic; font-family: times;}

H3 {color: navy; font-size: 10pt; font-weight: bold; font-family:
times;}

P {color: navy; font-size: 12pt; font-family: times; text-align:
justify;}

P.HELP {color: dackgreen; font-size: 10pt; font-family: times; text-
align: justify;}

P.LEFT {color: navy; font-size: 12pt; font-family: times; text-align:
right;}

</style>

</HEAD>

<h3> Ақпаратты технологиялар орталығы </h3>

<h1> Internet ақпараттық ресурсы </h1>

<h3> Профессионалдар емес үшін оқу әдістемесі </h3>

<h3> Храмцов П.Б</h2> <h3> Москва, 1997</h2>

<p><span class = FS> C </span> 1995 жылы Internet – ке 25 жыл болды.
Қазіргі кезде – бұл бүкіл әлемдегі өте үлкен ақпараттық ресурс. Сонымен
қатар Internet – бұл жер шарындағы ең атақты желі. 1997 жылы Internet
(Internic – Internet Information Center) рамкасында халықаралық желі
координация орталығының берген бағасы бойынша желіде бірнеше ондаған
миллион компьютер – серверлер үнемі қосылып тұратындығы анықталған. Осы
үлкен ақпараттық ресурс толығымен орталықтандырылмаған және бір де бір
мемілекетке және дүние жүзінің ірі финанстық компанияларына тәуелді емес.

</Body> </HTML>

Берілген мысалда SPAN контейнері <p> параграфының басында тагтан кейін
қолданып тұр. Бұл абзацтың бірінші әрпін ерекшелеуге мүмкіндік береді.

Стильдердің жазу таблицасының жаңа контейнерінен басқа тағы жаңа
атрибуттар жасалып шығарылды.

HTML контейнерлерінің қасиеттері

HTML тегіндегі жаңа атрибуттарды STYLE атрибутынан бастаған дұрыс. Бұл
атрибут контейнер басындағы таг ішіндегі контейнер бейнеленген стильді
анықтау үшін қолданылады.

<h3 style = “line-height: 24pt; font-weight: bold; color: blue”> The blue
text

<h3 style = “lineHeight =’24pt’; fontWeight=’bold’; color=’blue’ ”> The
blue text

Сонымен қатар силь класын анықтауға болады және CLASS атрибутының
көмегімен қолдануға болады.

H3.class1 {font-size: 12pt; color = blue} </style> …..

<h3.class = “class1”> This is a blue text

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

Класты анықтағаннан басқа ат берілетін стильді құруға болады. Аты
берілген стиль берілген бір класты анықтау негізінде құрылады.

<h3.class = “class1”> This is a blue text <h3.class = “class1” id =
“C1”> This is a blue text

Контейнерлердің қасиеті

Бірінші топқа шрифт қасиеті жатады

Font-size, font-family, font-weight, font-style

Екінші топқа мәтін қасиеті жатады

Line-height, text-decoration, text-transform, text-align, text-indent

Үшінші топқа мәтін блогының қасиеті жатады

margin-left, margin-right, margin-top, margin-bottom, margin, padding-
top, padding-right, padding-bottom, padding-left, paddings, border-top-
width, border-bottom-width, border-left-width, border-right-width, border-
width, border-style, border-color

Төртінші топқа фон түсін және текст түсін бейнелеуіштер құрастырады:

color, background-image, background-color.

Сонымен қатар, тізім элементтерін пулькалар типін және HTML-белгі
элементтерінің басқа қасиеттер қатарын анықтайтын қасиеттері бар болады.

Дәріс №25-26. Өзін-өзі тексеру сұрақтары немесе тесттер
1. Www-беттерді ұсыну және ұстануды бөлу технологиясы.CSS.
2. Стильдің күрделі кестелері. Селекторлар, қасиеттер, қасиеттің мәні.
Псевдоклассы.

Дәріс №27-28. WEB –ТАРМАҚ БЕТТЕРІН КӨРУДІ БАСҚАРУ. JAVASCRIPT
• JavaScript объекттері - Navigator'а объекттері модельдері
• Кластар иерархиясын жазу

JavaScript объекттері - Navigator'а объекттері модельдері

Қазіргі заманғы гипермәтіндік ақпараттық жүйелерді бірнеше
компоненттердің бірігуі түрінде елестетуге болады: гипермәтіндік
объектілерді сақтау жүйесі, гипермәтіндік объектілерді бейнелеу жүйесі,
гипермәтіндік объектіні дайындау жүйесі және гипермәтіндік объектіні көруді
программалау жүйесі. Осы көзқарастың арқасында World Wide Web 1996 жылы
ғана аяқталған және функционалды толық түрін алды. Ең бірінші болып сақтау
және көру жүйесі жасалды (1989-1991 жж) және бұлар қазіргі кезде дамуын
жалғастырып келеді. 1990 жылдың аяғында бірінші рет құжатты дайындау жүйесі
пайда болды. Соңында 1995 жылы көру сценарийін басқару тілдері бірінші рет
ұсынылды.

Деректер базасының гипермәтінді көру процедураларының
программалануы Netscape, Microsoft немесе Sun – ң жаңалықтары емес. Бірнеше
дәрежедегі барлық локальды гипермәтіндік жүйелер практика жүзінде
гипермәтіндік объектіні манипуляция жасау ететін программалау құралын
қамтиды. Кей жағдайларда барлық гипермәтіндік деректер базасы үлкен бір
программа ретінде ұсынылуы мүмкін, бұндағы гипермәтіндік тармақ ол –
программалық модульдер, ал олалдың арасындағы байланыс – бір модульден
екіншісіне беруді басқару,

Осындай жақын келу жағдайы традициялық статистикалық белгінің алдында
белгілі гипермәтіндік желіні орнатудың ыңғайлағы, деректер базасының
фрагментін айналдыру программасын ойлап табу қабілеті, белгілі қарапайым
компоненттерден гипермәтіндік объектіні генерациялау. Динамикалық объектіні
статистикалықтан алу өте оңай, көру рограммасының бар болу жағдайына
байланысты жүйеде гипермәтіндік деректер базасын интерактивті режимде көру
пакеттік режимге ауысуы мүмкін. Бұнда оператор қызметі программа
командаларымен ауысады. Гипермәтіндік беттерді көру программасын скрипт деп
атайды. Sh типті командалық интерпретатор үшін жазылған. Бұрындағыдай
локальді жүйеде World Wide Web гипермәтіндік құжатты көру программалауынжа
екі қадам болады: скриптті көруді программасын жасау немесе байт – код
компиляциясы. Біріші қадам World Wide Web дәстүрін жалғастырады,
гипермәтіндік бетті өңдеу үшін қарапайым текстік редактор керек және
гипермәтіндік құжаттың өзі оператор адамға оңай оқылуы керек. Екінші қадам
программаны орындау эффектісін арттырады және оның қауіпсіздігін қамтамасыз
етеді. Бірінші қадам сияқты, екінші қадам да программалауға объектілі –
бағытталған қадамға жүгінеді. Байт – код немесе оны мобильді – код деп те
атайды. Олар Java программалау технологиясының контексінде көп жазылған,
сондықтан барлық ойымызды скриптке аударайық, нақтырақ айтқанда JavaScript
тілінде жазылған скрипт туралы.

Navigator объектісінің – JavaScript объектісінің моделі.

JavaScript – ң идеясы өте қарапайым. JavaScript программасында
орындалатын операциялар жақсы танымал және түсінікті объектілер әрекетін
бейнелейді, Олар Netscape Navigator прораммасымен жұмыс істеу облысы және
HTML тілі контейнерінің элементі болып табылады. JavaScript – ң объектілі –
бағытталуы осымен тоқталмайды. Қасиеттер жиынтығы бар және объектілер
функциясының жиынтығынан тұратын объектілер ғана бар. Ақырғылары әдіс деп
аталады. Әдістерден басқа функциялар да бар, олар дәстүрлі программалау
тілінің функцияларына өте ұқсас және ол стандартты математикалық типпен
жұмыс істеуге немесе программаны орындау процесін басқаруға мүмкіндік
береді. Сонымен қатар JavaScript – те программалық үзілу аналогі деген
оқиға бар. Осы оқиғалар World Wide Web – те жұмыс істеуге бағытталған,
мысалы, Navigator жұмыс істеу облысына бетті жүктеу немесе гипермәтіндік
сілтемені таңдау. Оқиғаларды қолдана отырып гипермәтіндік бет және
программа авторы динамикалық объектіні көруді ұйымдастыра алады, мысалы,
жүгіртпелі жол немесе көптерезелі интерфейсті басқару.

Кластар иерархиясын жазу

Барлық JavaScript объектісінің құрылуы Navigator жұмыс істеу облысынан
бастау алады, оларды келесідей иерархия түрінде көруге болады,

[pic]

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

Дәріс №27-28. Өзін-өзі тексеру сұрақтары немесе тесттер
1. JavaScript тілі. Синтаксисі. Функциялары, объекттер.
2. JavaScript тілі. Құжаттың объекті моделі

Дәріс №29-30. ОБЪЕКТІЛЕР ӘДІСІ ЖӘНЕ ОБЪЕКТІЛЕР ҚАСИЕТІ. ЕСЕПТЕУ АҒЫМЫН
БАСҚАРУ
• Объектілер әдісі және объектілер қасиеті
• Оқиғалар
• Массивтер
• Графика

Объектілер әдісі және объектілер қасиеті

Осы кластардың әрқайсысы әдістер кластарының объектісін басқару
функциясынан тұрады. Осы әдістердің ең бастысы объектілердің мәндерін
тағайындайтындар болып табылады. Әдетте бұлар меншіктеу операциясы арқылы
бөлінеді. Бірақ қарапайым программалау тіліндегі операторлардың типтері
JavaScript – те де қолданылады (+,-,*, /, %, >>,<<, +=, -=, ...). Сонымен
қатар "+" қосу операторы жолмен жұмыс істегенде жолдың соңына тағы жаңа
жолды қосуды білдіреді.

s = "string1"+"string2"

JavaScript – те сандар және стандартты класстарды жазу операцияларынан
басқа есептеу ағымын басқару командалары да бар.

break – циклдан шығу;

while(i &lt 6)

{ if(i==3) break; }

continue –цикл соңына көшу;

while(i &lt 6)

{ if(i==3) continue; }

for - цикл;

for(i=0;i<9;i++)

{ ... }

for – объектіні меншіктеу операторы;

for(i in obj)

{ str = obj[i] }

if..else - шартты оператор;

if(i>0)

{ ... }

else

{ ... }

wile - шартты цикл;

wile(j==k)

{ j++; k--; }

var – айнымалыларды хабарлайтын оператор.

var kuku = "kuku"

Айнымалылар типі оған меншіктелетін мәнмен анықталады. Осы көрсетілген
операторлар JavaScript – ң операторларының толық жиынтығы емес, бірақ осы
операторлар арқылы практикалық жұмыстарды орындауға болады.

Оқиғалар

Тілдің маңызды элементі оқиға болып табылады. Программист оқиғаны
скрипттің программалық кодының белгілі бір бөлігін орындау үшін қолданады.
Ең жиі қолданылатын амалдардың бірі – Navigator беттерін жүктеу кезінде
анықталған іс - әрекетті орындау.

Барлық оқиғаларды толық санамай – ақ олардың ішіндегі көп қолданылатынын
ғана қарастырайық.

Netscape Navigator 3.0 пайда болуы және JavaScript 1.1 версиясының пайда
болуы Website – ы көру сценариін басқару мүмкіндіктерін бақылауды
жалғастыруға мүмкіндік берді. Тілдің жаңа версияларында мыналар
қарастырылған: JavaScript және Java арасындағы байланыс мүмкіндігі, plug-
ins орнатылғанын анықтау, объектінің (Area, Function, Image) жаңа типтері
анықталған және басқа да ерекшеліктер. Құрастырушылардың ойынша осылар
JavaScript программасының қызметін арттырады.

Массивтер

Біз қарастыратын жаңа объектілердің бірінші типі массивтер болып
табылады. “Array” типі JavaScript 1.1- де Navigator мен бейнеленетін
әртүрлі объектілерді манипуляция жасау ету үшін келтірілген. Бұл берілген
Website бетінің барлық гипермәтіндік сілтемелерінің тізімі, берілген беттің
барлық суретінің тізімі, берілген беттің барлық applet – ң тізімі, форманың
барлық элементтерінің тізімі. Array() конструкторын қолдану арқылы
қолданушы өзінің жеке массивін құра алады. Бұл келесідей әрекетпен іске
асады.

new_array = new Array()

new_array5 = new Array(5)

colors = new Array ("red","white","blue")

Массивтің өлшемі динамикалық өзгеруі мүмкін. Ең бірінші массивті анықтау
керек, содан барып оның бір элементіне мән меншіктеуге болады, Осы мән
меншіктелгеннен соң барып, массивтің өлшемі де өзгереді.

colors = new Array()

colors[5] = "red"

Осы жағдайда массив 6 элементтен тұрады, яғни массивтің бірінші элементі
0 индексінен басталады. Массив үшін үш әдіс анықталған:

join, reverse, sort. Join символдар жолында массив элементтерін
біріктіреді. Бұл әдісте аргумент ретінде бөлгіш көрсетіледі.

colors = new Array("red","white","blue")

string = acolors.join("+")

Символдар жолындағы string меншіктеу мәнін қабылдағанда біз келесі жолды
аламыз.

string = "red + white + blue"

Басқа әдіс reverse – бұл массив элементтерінің ретін өзгертеді, ал sort
әдісі элементтерді өсуі бойынша реттейді. Массивтерде екі қасиет бар:
length және prototype. Length – массивтің элементтерінің санын анықтайды.
Егер массивтің элементтеріне бірнеше ескішіл операция орындау керек болса,
онда мына цикл типтерін қолдануға болады.

color = new Array("red","white","blue")

n = 0

while(n != colors.length)

{.... цикл денесінің операторы ...}

Prototype қасиеті массив объектісіне қасиет қосуға мүмкіндік береді.

$$$002-010-002$3.2.15.4 Графика

Navigator 3.0 – ге дейін JavaScript – те Image типіндегі құрылған
объектілер қолданып келеді. Тілдің жаңа версиясында осы типті объектілер
үшін конструкторлар пайда болады.

new_image = new Image()

new_image = new Image (width,height)

Әдетте мультипликация жасау мақсаты үшін графикалық объектілер массивін
жасайды, одан кейін олар бірінен кейін бірі орындалады.

img_array = new Array()

img_array[0] = new Image(50,100)

img_array[1] = new Image(50,100)

....

img_array[99] = new Image(50,100)

Image объектісінің 10 қасиеті бар, оның ішінде ең маңыздысы src.img_array
массив элементіне нақты бір суретті меншіктеу үшін келесі командалар
тізбегін орындау керек.

img_array[0].src = "image1.gif"

img_array[1].src = "image2.gif"

...

img_array[99].src = "image100.gif"

Осы жағдайда атты меншіктеу цикілінде қолдануға болар еді, онда олар
константадан және индекстік айнымалының мәнінен тұруы мүмкін. Тілдің жаңа
версиясында Image типі объектіні HTML тегінде IMG деп атын өзгертуге
болады. Сонымен қатар егер Image форманың ішінде қолданылса, онда ол осы
форманың қасиеті болатынын ескеру керек. Бұл келесі графикалық объектілер
үшін әртүрлі құрама аттар қолдану керек дегенді білдіреді.

<--- Құжатқа қоса салынған объект

document.car.src = "car1.gif"

<-- Құжатқа қоса салынған объект

</form>

document.kuku.car.src = "car1.gif"

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

document.images[1].src = "car1.gif"

Енді осы мысалды Image массивімен кеңейте отырып, біз мультипликациясы
бар құжат құрамыз.

<HTML>

<HEAD>

function multi_pulti()

{

img_array = new Array()

img_array[0] = new Image(50,100)

....

img_array[99] = new Image(50,100)

img_array[0].src = "image1.gif"

...

img_array[99].src = "image100.gif"

n=0

while(n==0)

{

document.images[0].src = img_array[0].src

...

}

</SCRIPT>

</head>

</body>

</html>

Дәріс №29-30. Өзін-өзі тексеру сұрақтары немесе тесттер
1. Web-сервер және браузердің өзара байланыс принциптері.
2.Клиент – сервер қатынасының негізі.
3. Жоғары деңгейлі протоколдар.

3. ПРАКТИКАЛЫҚ ЖӘНЕ ЛАБОРАТОРИЯЛЫҚ САБАҚТАР

№1 зертханалық сабақ
Қарапайым HTML файлдарын құру

Зертханалық сабаққа арналған оқу-әдістемелік нұсқаулар №1

Сабақ мақсаты:
• Тэгтермен жұмыс істеуді үйрену.
• Құжатта мәтіндерді орналастыруды үйрену.

Сабақтан алған білімді тексеру тапсырмалары №1

Тапсырма 1. Қарапайым HTML файлын құру.
1. Өз каталогыңызда құрастырылған Web- бетті сақтау үшін KURS бумасын
құрыңыз.
2. Блокнот (Notepad) программасын қосыңыз.
3. Ашылған редактор терезеде қарапайым HTML файлын жазыңыз:

[pic]
4. Файлды RASP.HTM атауымен сақтаңыз.
5. Құрылған Web-бетті көру үшін Microsoft Internet Explorer браузерін
жүктеңіз.
6. Команданы орындаңыз Файл (File), Ашу (Open), көру (Обзор, Browse), KURS
бумасынан RASP.HTM файл тауып және оны жүктеңіз. Web- беттің атауы
браузердің үстіңгі жоғары жағында жазылғанына көз жеткізіңіз. (“HTML оқу
файлы”).
Экран бетінде 1 – суретте көрсетілгендей өз жұмысыңыздың нәтижесін көресіз:

[pic]
1–сурет.

Тапсырма 2. Экранда мәтіндердің орналасуын басқару.
1. №1 тапсырманың 5 – 6 пункттерін орындаңыз.
2. Өзіңіз құрған Web- бетті Түр (View), Источник (В виде HTML) командасын
орындау арқылы ашыңыз. Блакнот программасында сіздің web – бетіңіз HTML
командасында жазылған терезе ашылады.
3. Внесите изменения в текст файла HTML файлда мәтінге өзгертулер
еңгізіңі, “Расписание”, “занятий”, “на вторник” сөздерін әр жолға
орналастырып:
[pic]
4. Мәтіні өзгертілген тексті Файл (File), Сохранить(Save) командасының
көмегімен РRASP.HTM файлда сақтаңыз. Блокнот программасын жазыңыз.
5. Microsoft Internet Explorer браузеріндің көмегімен алынған Web- бетті
қараңыз, F5 пернесін немесе Вид (View), Обновить (Refresh) комадасын
орындау арқылы. Экран бетін текст мәтіні өзгерді ме?
Ескерту. Алдағы уақытта web- беттке өзгертулер еңгіссеңіз 2-тапсырманың 4 –
5 пунктерін орындаңыз.

№2 зертханалық сабақ
Форматтаудың арнайы командалары

Зертханалық сабаққа арналған оқу-әдістемелік нұсқаулар №2

Сабақ мақсаты: форматтау командаларын басқаруды үйрету

Сабақтан алған білімді тексеру тапсырмалары №2
Тапсырма. Форматтаудың кебір арнайы командалары
Жаңа жолдан бастау және жолды ауыстыру үшін арнайы командалар бар. Браузер
программасының қандайда бір жолмен текстің форматын өзгертуге тиым салатын
және экран бетіне берілген текстік фрагментті нақты шығаруға бөкет
болмайтын командалар бар.
<BR> тэгі жолды келесі мәтіннен немесе граикадан ажыртауға арналған. <Р>
абзац тэгі жолды анықтайды және де бос орынды көрсетеді. Бұл екі тэгте
бірэлементті болып табылады.
Жолды ауыстыру және абзац тэгтерін қолдану.
1. HTML файл мәтініне өзгерістер еңгізіңіз:

[pic]
2. RASP.HTM файлна өзгертулер енгізілген мәтінді сақтаңыз.
3. Microsoft Internet Explorer браузердің көмегімен алынған Web- бетті
көріңіз. Экранда өзгкрту енгізіген текст қалай көрсетілген? Жаңа бет 2 –
суретте көрсетілгендей болады..
[pic]
2 – сурет.

№3 зертханалық сабақ
Тақырыптар стилін қолдану

Зертханалық сабаққа арналған оқу-әдістемелік нұсқаулар №3

Сабақ мақсаты: : тақырыптар стилін қолдануға үйрену

Сабақтан алған білімді тексеру тапсырмалары №3
Тапсырма. Тақырыптар стилін қолдану.

Тақырып үшін алты тэг қолданылады. ( <Н1> бастап <Н6> дейін). Әрбір тэгке
браузер параметрі баптауымен берілген стиль сәйкес келеді.

1. RASP.HTM файлна өзгертулер еңгізіңіз:

[pic]
2. Шыққан web-бетті қараңыз.
Экран бетіннен 3- суретте көрсетілгендей жазуды көресіз.
[pic]
3 – сурет.

№4 зертханалық сабақ
Ағымдағы кәріптің өлшемін өзгерту

Зертханалық сабаққа арналған оқу-әдістемелік нұсқаулар №4

Сабақ мақсаты: ағымдағы қәріптің өлшемін өзгертуді үйрену

Сабақтан алған білімді тексеру тапсырмалары №4
Тапсырма. Ағымдағы қәріптің өлшемін өзгерту.
Тэг шрифта <FONT> қаріп тэгі 1-ден 7-ге дейінгі аралықта белгілеген мәтін
орнында ағымдағы қәріптің өлшемін өзгертеді.
1.RASP.HTM файлына өзгертулер еңгізіңіз:

[pic]
2. <FONT> тэгін қолданып “занятий на вторник” мәтіннің қәріпін
өзгертіңіз.
3. Абзац және жолды ауыстыру тэгі және текст фрагментін ерекшелу тэгтерін
қолданып HTML- құжат мәтінін безендіріңіз.

№5 зертханалық сабақ
Қәріп түсін және гарнитураларды орнату

Зертханалық сабаққа арналған оқу-әдістемелік нұсқаулар №5

Сабақ мақсаты: қәріп түсін және гарнитураларды орнатуды үйрену

№9 зертханалық сабақ
Бейненің атрибуттарын орналастыру

Зертханалық сабаққа арналған оқу-әдістемелік нұсқаулар №9

Сабақ мақсаты: Бейненің атрибуттарын орналастыруды үйрену

Сабақтан алған білімді тексеру тапсырмалары №9

Тапсырма 1. Бейненің атрибуттарын орналастыру.
RASP.HTM файлына өз беттеріңше түзетулер енгізіңдер: ALT, BORDER, HEIGHT,
WIDTH сияқты графика атрибуттарының қолданылуын қадағалаңдар.
Ескерту. Әрқашан гарфикалық файлдың өлшеміне (байт бойынша) мән беріңдер,
өйткені Web-беттің жүктелуіне әсер етеді.

№10 зертханалық сабақ
Web-бетте бейненің фонын орналастыру

Зертханалық сабаққа арналған оқу-әдістемелік нұсқаулар №10

Сабақ мақсаты: Web-бетте бейненің фонын орналастыруды үйрену

Сабақтан алған білімді тексеру тапсырмалары №10
Тапсырма. Web-бетте бейненің фонын орналастыру
Фондық бейнелер — бұл қалыпты тікбұрышты плашки бейнесі бар гарфикалық
файл. Браузерде қарау кезінде бұл плашка өзінің өлшеміне тәуелсіз, барлық
терезені толтыра қайталанады.
Фон түріндегі графика <BODY> тэгі арқылы беліделі.
RASP.HTM файлына түзетулер енгізіңдер:

[pic]

Экраннан 6-суреттегі бейнені көресіздер.
[pic]
6-сурет

fon1.GIF графикалық файлы 7-суреттегідей бейнеленеді.
[pic]
7-сурет

№11 зертханалық сабақ
Кесте құру

Зертханалық сабаққа арналған оқу-әдістемелік нұсқаулар №11

Сабақ мақсаты: кесте құруды үйрену

Сабақтан алған білімді тексеру тапсырмалары №11
Тапсырма. Кесте құруды.
Кесте HTML құжатының негізгі бөлігі болып табылады. Ол вертикал орналасқан
бағандар мен горизонтальды жолдардан құралған тіктөртбұрышты торлардан
тұрады. Бағандар мен жолдардың қиылысуын ұяшық деп атаймыыз. Ұяшық мәтінен,
графикадан, кестеден тұруы мүмкін.
Кесте негізгі үш бөліктен тұрады:
• кесте атауы;
• бағана тақырыбы;
• ұяшықтар.
Кесте жол бойынша толтырылады (солдан оңға қарай - )
Кесте жол бойынша толтырылады (солдан оңға — жол бойынша, одан кейін
келесі жолға өтеміз). Әр бір ұяшықты толтыру керек. Бос ұяшықтарды құру бос
орынды қолданамыз.
1. Блокнот программасын жүктеңіз.
2. Редатор терезесінде келесі тексті теріңіз:

[pic]
3. 5.НТМ атты файл құрыңыз.
4. Құрылған Web- бетті көру үшін Microsoft Internet Explorer браузерін
жүктеңіз.
Экран бетінен 8 – суретте көрсетілгендей көруге болады.
[pic]
8 – сурет.

№12 зертханалық сабақ
Гипертексті байланыс орнату

Зертханалық сабаққа арналған оқу-әдістемелік нұсқаулар №12

Сабақ мақсаты: гипертексті байланысты орнатуды үйрену

Сабақтан алған білімді тексеру тапсырмалары №12
Тапсырма. Гипертексті байланысты орнату
HTML тілінің маңызды қасиеті құжаттағы сілтеме арқылы келесі құжатқа өту
мүмкіндігі.
Важнейшим свойством языка HTML является возможность включения в документ
ссылок на другие документы.
Сілтемелер болуы мүмкін:
— өшірілген HTML-файлға,
— кейбір ағымдағы HTML-құжат нүктесіне,
— HTML – құжат болмайтын кез келген файлға;
Сілтеме ретінде тексті немесе графиканы қолдануға болады.
Бір құжаттағы сілтемелер
Мұндай сілтемелер екі бөліктен тұрады: белгі және сілтеменің өзі. Белгі
сілтеме өтетін кездегі нүктені анықтайды. Сілтеме белгі атауын қолданады.
Сілтемелер браузер баптауына байланысты түспен немесе сызылған болып
беліленеді. Түстің өзгеруіне байланысты LINK= және VLINK= <BODY> тэгі
сілтемеде қолданылады.
Сілтемені суреттейміз:
<A HREF="#ПН">Понедельник</А>
Сілтеме бойынша өту керек белгінің атауына алдына # символы қойылады. “>”
және “<” символдары арасына (“Понедельник”) тексті орналасады.
Белгіні анықтаймыз:
<A NAME="ПН">Понедельник</А>
1. 5.НТМ файл толықтырыңыз, апта күндерінің атауымен кестені толықтырып,
Web-беттің басына орналастырыңыз:

[pic]
2. Дүйсенбіні көрсететін 5.НТМ файлна белгі қойыңыз:

[pic]
3. Белгіленген белгіге арналған сілтемені кестеге апта күндерінің атауын
қойыңыз:

[pic]
4. Қалған апта күндеріне үшін күнтізбе кестесін құрыңыз.
5. Файлды сақтаңыз.
6. Алынған Web-бетті көріңіз.
Экран бетінен 9 – суретте көрсетілгендей көруге болады.
[pic]
9 – сурет.

№13 зертханалық сабақ
Басқа HTML – құжатқа сілтеме құру

Зертханалық сабаққа арналған оқу-әдістемелік нұсқаулар №13

Сабақ мақсаты: басқа HTML – құжатқа сілтеме құруды үйрену

Сабақтан алған білімді тексеру тапсырмалары №13
Тапсырма. Басқа HTML – құжатқа сілтеме құру.
Сілтеме белгіленген сөзге немесе фразаға шерту арқылы басқа файлға өтеміз.
Сілтемені суреттейік:
<А HREF="5.HTM">5 класс</А>
Файл атауынан (5.НТМ) кейін “>” және “<” символдарының арасына (“5 класс”)
текстін орналастырамыз, осы файлға өту үшін оны шерту керек.
1. RASP.HTM файлын браузерге жүктейміз.
2. файлға өзгертулер еңіземіз:
[pic]
3. Файлды сақтаймыз.
4. Алынған Web-бетті қараңыз.
Экран бетінен 10 – суретте көрсетілгендей көруге болады.
[pic]
10 – сурет.

№14 зертханалық сабақ.
Басқа HTML – құжатқа сілтеме құру

Зертханалық сабаққа арналған оқу-әдістемелік нұсқаулар №14

Сабақ мақсаты: басқа HTML – құжатқа сілтеме құруды үйрену

Сабақтан алған білімді тексеру тапсырмалары №14
Тапсырма. Басқа HTML – құжатқа сілтеме құру.
1. Беттің соңында алғашқы бетке сілтеме болатындай 5.НТМ файлға өзгерту
еңгізіңіз Расписание занятий 5 классов (файл RASP.HTM). Сілтеме ретінде
графикалық файлды орнатамыз:

[pic]
2. Алынған Web-бетті қараңыз.
Экран бетінен 11 – суретте көрсетілгендей көруге болады.
[pic]
11 – сурет.
Сілтеме ретінде HOME.GIF файлында орналасқан суретті (оңға және жоғарыға
қараған бағыт) қойдық.

№15 зертханалық сабақ.
Текст фрагменттерін белгілеу

Зертханалық сабаққа арналған оқу-әдістемелік нұсқаулар №15

Сабақ мақсаты: текст фрагменттерін белгілеуді үйрену

Сабақтан алған білімді тексеру тапсырмалары №15
Тапсырма. Текст фрагменттерін белгілеу.
1. RASP.HTM файлна өзгертулер еңгізу:
[pic]
2. Алынған Web-бетті көреміз.
Комбинерленген белгілеулерді қолдануға болады.

[pic]
Бірақта комбинерлік тэгтерді жазған кезде келесі ережелерді білу керек:
<Тэг-1> <Тэг-2> ... </Тэг-2> </Тэг-1> — дұрыс жазу;
<Тэг-1> <Тэг-2> ... </Тэг-1> </Тэг-2> — қате жазу.
Символдар өлшемін беру
Браузермен берілген текст өлшемін басқарудың екі тәсілі бар:
— тақырып стилін қолдану;
— негізгі құжаттың шрифт өлшемін беру немесе ағымдағы шрифтің өлшемін беру.
Тақырып стилін қолдану
Тақырыпта алты тэг (<Н1>-ден <Н6>дейін) қолданылады. Әр бір стильге
браузер баптауымен берілген параметрлер сәйкес келеді.

4. студенттің өздік жұмысы
Студенттер өздік жұмысын реферат түрінде жазу керек. Орындалған өздік
жұмыс нәтижесінің есебі А4 форматында терілген болу керек. Шрифт Times
New Roman, өлшем -12 пн., аралық интервал – 1,5, мәтінді түзету – беттің
ені бойынша.
Бет параметрі: жоғарғы өріс (см.) – 2, төменгі – 2, сол жақ – 2,5, оң
жақ – 1,5 см. Бетті нөмірлеу – беттің жоғарғы, оң жағында.
Төменгі колонтитулға өз Фамилияңызды Атыңызды Отчествоңызды және топ
нөмірін қойыңыз.
1. Пәннің зерттейтін объектісі және құрылымы.
2. Ақпаратты өңдейтін және беретін WEB-технологиялар туралы түсінік.
3. WEB-технологияларының дамуының тарихи мәліметі.
4. WEB-қосымшаларының типтеріне шолу.
5. Интернеттегі клиент-серверлік архитектура.
6. Компьютер мен қосымшаның клиент-серверлі әрекеттесуі.
7. Компьютерлік тораптар.
8. Интернеттегі тораптардың иерархиясы.
9. Интернеттегі ISP, POP, NAP түсініктері.
10. Интернетке ақпаратты жіберу. TCP/IP протоколдарының стэгі.
11. IP – бағдарының үрдісі.
12. Домендік аттардың жүйесі. DNS – сервер.
13. Браузерлер мен серверлер.
14. Прокси-сервер. URL-мекенінің форматы.
15. OSI моделінің қолданбалы деңгейінің протоколдары.
16. Гипермәтін және WEB –парақтар.
17. HTTP сервер және клиент.
18. HTTP-протоколы бойынша сұраулар мен жауаптардың атаулары.
19. Электрондық пошта, SMTP және POP3 протоколдары, пошталы сервер және
клиент.
20. FTP протоколдарын, FTP-қоры мекенінің форматын, FTP-сервер және
клиенттерін белгілеу.
21. Чат, шұғыл поштаның қызметтері, IRC-желілері.
22. Telnet протоколдарын белгілеу.
23. IP-телефония, видеоконференциялар, WAР-протоколы негізіндегі мобильді
интернет.
24. Статистикалық және динамикалық HTML-парақтар.
25. Құжатты гипермәтіндік белгілейтін HTML, OHTML, XHTML, XML –
ерекшеліктері.
26. HTML-де CSS-ті қолдану технологиялары.
27. Клиент және сервер жағында орындалатын технологиялар.
28. WEB-сервер жұмысының механизмі.
29. Серверді қоршаған ортаның айнымалылары.
30. CGI технологиясы, CGI бойынша сұраулар мен жауаптардың атаулары.
31. PERL, PHP, ASP, SSI-дің серверлік сценарийлері.
32. WEB-қосымшаларын жасаудың аспаптары.
33. WEB-технологиялардың негізінде компьютер желілеріндегі ақпаратты
қорғау.
34. WEB-технологияларының қолдану салалары мен даму перспективалары.

-----------------------

[pic]

hub

[pic]

</pre> </div>
<div class="col-lg-3">
<div class="headline">
<span class="headlineText g-pb-7">Пәндер</span>
</div>
<ul class="list-unstyled categories">
<li><a href="referat/lists/66/1">Іс жүргізу</a></li><li><a href="referat/lists/80/1">Автоматтандыру, Техника</a></li><li><a href="referat/lists/92/1">Алғашқы әскери дайындық</a></li><li><a href="referat/lists/88/1">Астрономия</a></li><li><a href="referat/lists/91/1">Ауыл шаруашылығы</a></li><li><a href="referat/lists/35/1">Банк ісі</a></li><li><a href="referat/lists/36/1">Бизнесті бағалау</a></li><li><a href="referat/lists/70/1">Биология</a></li><li><a href="referat/lists/37/1">Бухгалтерлік іс</a></li><li><a href="referat/lists/38/1">Валеология</a></li><li><a href="referat/lists/90/1">Ветеринария</a></li><li><a href="referat/lists/39/1">География</a></li><li><a href="referat/lists/40/1">Геология, Геофизика, Геодезия</a></li><li><a href="referat/lists/41/1">Дін</a></li><li><a href="referat/lists/71/1">Ет, сүт, шарап өнімдері</a></li><li><a href="referat/lists/42/1">Жалпы тарих</a></li><li><a href="referat/lists/72/1">Жер кадастрі, Жылжымайтын мүлік</a></li><li><a href="referat/lists/43/1">Журналистика</a></li><li><a href="referat/lists/1/1">Информатика</a></li><li><a href="referat/lists/44/1">Кеден ісі</a></li><li><a href="referat/lists/48/1">Маркетинг</a></li><li><a href="referat/lists/73/1">Математика, Геометрия</a></li><li><a href="referat/lists/50/1">Медицина</a></li><li><a href="referat/lists/74/1">Мемлекеттік басқару</a></li><li><a href="referat/lists/51/1">Менеджмент</a></li><li><a href="referat/lists/52/1">Мұнай, Газ</a></li><li><a href="referat/lists/75/1">Мұрағат ісі</a></li><li><a href="referat/lists/49/1">Мәдениеттану</a></li><li><a href="referat/lists/83/1">ОБЖ (Основы безопасности жизнедеятельности)</a></li><li><a href="referat/lists/54/1">Педагогика</a></li><li><a href="referat/lists/76/1">Полиграфия</a></li><li><a href="referat/lists/55/1">Психология</a></li><li><a href="referat/lists/57/1">Салық</a></li><li><a href="referat/lists/58/1">Саясаттану</a></li><li><a href="referat/lists/56/1">Сақтандыру</a></li><li><a href="referat/lists/59/1">Сертификаттау, стандарттау</a></li><li><a href="referat/lists/60/1">Социология, Демография</a></li><li><a href="referat/lists/85/1">Спорт</a></li><li><a href="referat/lists/61/1">Статистика</a></li><li><a href="referat/lists/78/1">Тілтану, Филология</a></li><li><a href="referat/lists/79/1">Тарихи тұлғалар</a></li><li><a href="referat/lists/77/1">Тау-кен ісі</a></li><li><a href="referat/lists/87/1">Транспорт</a></li><li><a href="referat/lists/62/1">Туризм</a></li><li><a href="referat/lists/63/1">Физика</a></li><li><a href="referat/lists/64/1">Философия</a></li><li><a href="referat/lists/82/1">Халықаралық қатынастар</a></li><li><a href="referat/lists/65/1">Химия</a></li><li><a href="referat/lists/67/1">Экология, Қоршаған ортаны қорғау</a></li><li><a href="referat/lists/68/1">Экономика</a></li><li><a href="referat/lists/81/1">Экономикалық география</a></li><li><a href="referat/lists/89/1">Электротехника</a></li><li><a href="referat/lists/45/1">Қазақстан тарихы</a></li><li><a href="referat/lists/46/1">Қаржы</a></li><li><a href="referat/lists/86/1">Құрылыс</a></li><li><a href="referat/lists/47/1">Құқық, Криминалистика</a></li><li><a href="referat/lists/69/1">Әдебиет</a></li><li><a href="referat/lists/53/1">Өнер, музыка</a></li><li><a href="referat/lists/84/1">Өнеркәсіп, Өндіріс</a></li>
</ul>
</div>
</div>
</div>

<div class="g-bg-black-opacity-0_9 g-color-white-opacity-0_8 g-py-30">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6">
<p>Қазақ тілінде жазылған
<a href="/Рефераттар">рефераттар</a>,
<a href="/Курстық-жұмыстар">курстық жұмыстар</a>,
<a href="/Дипломдық-жұмыстар">дипломдық жұмыстар</a>
бойынша біздің қор #1 болып табылады.</p>
<a href="https://play.google.com/store/apps/details?id=uz.smd.referatskz">
<img src="assets/img/google-play-badge.png" width="170" alt="google play"></a>
<a class="btn btn-xs rounded-0" href="https://apps.apple.com/kz/app/stud-kz/id1602187453">
<img src="assets/img/appstore-badge.svg" width="150" alt="appstore"></a>
<br><br>
<img src="/assets/img/payment-icon/mastercard.svg" width="47" height="28" alt="MasterCard">
<img src="/assets/img/payment-icon/visa.svg" width="54" height="18" alt="Visa" style="margin-left: 20px;">
</div>

<div class="col-lg-3 col-md-6">
<div class="g-brd-white-opacity-0_3 g-mb-25">
<h2 class="h6 text-uppercase g-brd-primary">Ақпарат</h2>
</div>

<nav class="text-uppercase1">
<ul class="list-unstyled g-mt-minus-10 mb-0">
<li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
<h4 class="h6 g-pr-20 mb-0">
<a class="g-color-white-opacity-0_8 g-color-white--hover" href="page/about">Жоба жайлы</a>
<i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
</h4>
</li>
<li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
<h4 class="h6 g-pr-20 mb-0">
<a class="g-color-white-opacity-0_8 g-color-white--hover" href="chatgpt">ChatGPT</a>
<i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
</h4>
</li>
<li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
<h4 class="h6 g-pr-20 mb-0">
<a class="g-color-white-opacity-0_8 g-color-white--hover" href="page/lawAuthor">Авторлық құқық</a>
<i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
</h4>
</li>
<li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
<h4 class="h6 g-pr-20 mb-0">
<a class="g-color-white-opacity-0_8 g-color-white--hover" href="page/lawUser">Қолдану шарты</a>
<i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
</h4>
</li>
<li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
<h4 class="h6 g-pr-20 mb-0">
<a class="g-color-white-opacity-0_8 g-color-white--hover" href="page/cloudpayments">Төлем</a>
<i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
</h4>
</li>
<li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
<h4 class="h6 g-pr-20 mb-0">
<a class="g-color-white-opacity-0_8 g-color-white--hover" href="page/buybase">База сатып аламыз</a>
<i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
</h4>
</li>
<li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
<h4 class="h6 g-pr-20 mb-0">
<a class="g-color-white-opacity-0_8 g-color-white--hover" href="page/free">Тегін</a>
<i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
</h4>
</li>
</ul>
</nav>
</div>

<div class="col-lg-3 col-md-6 g-mb-0--lg">
<div class="g-brd-white-opacity-0_3 g-mb-25">
<h2 class="h6 text-uppercase g-brd-primary">Қосымша</h2>
</div>

<nav class="text-uppercase1 g-mt-10">
<ul class="list-unstyled g-mt-minus-10 mb-0">
<li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
<h4 class="h6 g-pr-20 mb-0">
<a class="g-color-white-opacity-0_8 g-color-white--hover" href="makal-matelder">Мақал-мәтелдер</a>
<i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
</h4>
</li>
<li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
<h4 class="h6 g-pr-20 mb-0">
<a class="g-color-white-opacity-0_8 g-color-white--hover" href="zhanyltpashtar">Жаңылтпаштар</a>
<i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
</h4>
</li>
<li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
<h4 class="h6 g-pr-20 mb-0">
<a class="g-color-white-opacity-0_8 g-color-white--hover" href="zhumbaktar">Жұмбақтар</a>
<i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
</h4>
</li>
<li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
<h4 class="h6 g-pr-20 mb-0">
<a class="g-color-white-opacity-0_8 g-color-white--hover" href="feedback">Пікірлер</a>
<i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
</h4>
</li>
<li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
<h4 class="h6 g-pr-20 mb-0">
<a class="g-color-white-opacity-0_8 g-color-white--hover" href="user/addfile"><i class="fa fa-upload"></i> Файл қосу</a>
<i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
</h4>
</li>
<li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
<h4 class="h6 g-pr-20 mb-0">
<a class="g-color-white-opacity-0_8 g-color-white--hover" href="https://t.me/StudKZBot"><i class="fa fa-telegram"></i> Telegram</a>
<i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
</h4>
</li>
<li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
<h4 class="h6 g-pr-20 mb-0">
<a class="g-color-white-opacity-0_8 g-color-white--hover" href="ru">На русском</a>
<i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
</h4>
</li>
</ul>
</nav>
</div>

<div class="col-lg-3 col-md-6">
<address class="g-bg-no-repeat g-line-height-2 g-mt-minus-4" style="background-image: url(themes/img/map.png);">
<br> Email: <a href="mailto:info@stud.kz" class="">info@stud.kz</a>
</address>
</div>
</div>
</div>
</div>

<footer class="g-bg-gray-dark-v1 g-color-white-opacity-0_8 g-py-15">
<div class="container">
<div class="row">
<div class="col-md-8 text-center text-md-left g-mb-0--md">
<div class="d-lg-flex">
<small class="d-block g-font-size-default g-mr-10 g-mb-0--md">
since 2008 © <img alt="stud.kz" src="assets/img/studkz_38_31.png" id="logoimg"> Stud.kz <span>|</span> 0.007 </small>
</div>
</div>

</div>
</div>
</div>
</footer> <ul id="footbar" class="nav text-center nav-justified" style="z-index: 999;">
<li class="nav-item">
<button class="btn u-btn-outline-brown btn-lg rounded-0 " type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-dot-circle-o"></i></button>
<div class="dropdown-menu rounded-0">
<a class="dropdown-item" href="search"><i class="fa fa-search"></i> Іздеу</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="user/addfile"><i class="fa fa-upload"></i> Файл қосу</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="prezentatsiya">Презентациялар</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="page/free">Тегін</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item g-cursor-pointer" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> Кабинет</a>
<div class="dropdown-menu rounded-0">
<a class="dropdown-item" href="user/balance"><i class="fa fa-money"></i> Баланс</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="favorite/list"><i class="fa fa-heart"></i> Таңдаулы жұмыстар</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="user/history-buy"><i class="fa fa-cart-arrow-down"></i> Cатып алған жұмыстарыңыз</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="user/myfiles"><i class="fa fa-file-word-o"></i> Менің файлдарым</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="user/myprezent"><i class="fa fa-file-powerpoint-o"></i> Презентацияларым</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="user/sale-stat"><i class="fa fa-bar-chart-o"></i> Сатылым статистикасы</a>
</div>
</div>
</li>
<li class="nav-item">
</li>
<li class="nav-item pull-right">
<a class="btn u-btn-outline-yellow btn-lg rounded-0 pull-right" href="tapsyrys"><i class="fa fa-bell"></i></a>
</li>
</ul> </main>