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

 

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

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

мазмұны

 

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 AccessPoints) қамтамасыз ететін нүктелер арқылы өз араларында тікелей байланыстыорнатады. Осылайша, басқа провайдерлердің магистральды желілеріне қосылуқұрылады, нәтижесінде жоғары деңгейлі көптеген желілердің бірігуі болады.

Интернетте жүздеген ірі интернет-провайдерлерорналасады және олардың магистральды желілері 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 жүйесінпайдаланған абзал. Осы секілді почталық байланыстар желілік көмей (networkgateways) деп аталады, олар 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 ішінен керекті информацияны іздеп табуға мүмкіндік беретін тағы бір мүмкіндікті қарастырып өтейік. Wordwide 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 м² көлемінде территорияны қамтамасыз ететін желі

Аймақтық – қаланемесе облыс территориясында орналасқан

Ауқымды мемлекет немесемемлекеттер тобы территориясында орналасқан, мысалы, бүкіләлемдік желі Internet.

Компьютерлік желілер классификациясы

Желі классификациясында екі негізгі терминбар:LAN және WAN.

LAN (Local Area Network) – тұйықинфрақұрылымы бар жергілікті желі. LAN термині кішкентайофистік желіні, бірнеше жүз гектар алатын үлкен зауыт деңгейіндегі желінісипаттауы мүмкін.

WAN (wide AreaNetwork)– жергіліктіжеліні, сонымен қатар телекоммуникациялық желі мен құрылғыларды қосатын, үлкенгеографиялық аймақтарды біріктіретін ауқымды желі. Мысалы 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 – тегі қажет емес тегтің атрибуттар тізімінен кейін болатын аттанқұралады. Тегтің мәтіні бұрышты жақшалардан тұрады (< және >).Тегтің еңқарапайым оңай вариянты – бұрыштық жақшаларға негізделген аты. Мысалға:<HEAD> немесе <i>. Қиын тегтер үшін, функцияның тегтерін видеоөзгерту үшін автормен анықталған дәл мағынасы бар болатын атрибуттардыңайырмашылығы сипатталады.

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

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

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

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

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

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

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

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

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

  контейнер мазмұны                           </ тегтің аты >

 

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

БарлықНТМL тегтерінің тағайындалуы мен әрекеттесу орталарын келесі негізгі түрлергебөліп көрсетуге болады;

·         Құжаттың құрылымынанықтайтындар;

·         Гипермәтін блоктарын өңдеу(параграфтар, тізімдер, кестелер, суреттер

·         Гипермәтіндік сілтемелер немесе закладки;

·         Диалог ұйымдары үшін формалар

·         Программаны шақыру.

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

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

    Бұлмәтін 

    <Arel=nofollow ugc target=_blank href=http://polyn.net.kiae.su/altai/index.html>

    Гипермәтіндіксілтеме </A> — дан тұрады.

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

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

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

    <HTML>құжаттың мазмұны </HTML>

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

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

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

 

Дәріс№9-10. Өзін-өзі тексеру сұрақтары немесе тесттер

1. Интернетте адрисация: ip-адресі және URL.

2. HTML тілі. Таңбалар, тегтер, элементтер,атрибуттар.

 

 

Дәріс №11-12. HTML ТЕГТЕРІ

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

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

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

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

·    Табуляция

·    Тізім

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

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

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

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

TITLE

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

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

         <TITLE> Құжат аты  </TITLE>

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

BASE

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

ISINDEX

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

 <ISINDEX HREF=

http://polyn.net.kiae.su/cgi-bin/search

PROMPT=”EnterKeywords:”>

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

ALIGNатрибуты.

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

 

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

 

Мән	Қолданылуын сипаттау
Left Right Justify Center	Сол жақ шетке теңестіру Оң жақ шетке теңестіру Сол және оң жақ шетке теңестіру Ені бойынша теңестіру

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

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

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

 

Мәні	Тағайындалуы
Left	Беттің сол жақ шетінде орналасқан суретті өткізу
Right	Беттің оң жақ шетінде орналасқан суретті немесе кестені өткізу
All	Суреттің немесе кестенің алдында тұрған мәтінді үзу және төменде жалғастыру

 

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

              <P CLEAR=”100 pix”>

<BR>тегі

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

 

<BR CLEAR =LEFT>	Мәтін сол жақтағы жақын арадағы бос алаңнан бастап жалғастырылады
<BR CLEAR =RIGHT>	Мәтін оң жақтағы жақын арадағы бос алаңнан бастап жалғастырылады
<BR CLEAR =ALL>	Мәтін сол және оң жақтағы алаң бос болғанда жалғастырылады

 

<NOBR>тегі

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

 

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

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

 

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

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

SIZE=атрибуты

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

<BIG>және <SMALL> тегтері

<BIG></BIG>және <SMALL></SMALL> тегтері арасында орналасқан мәтін сәйкескеледі.

COLOR=xxатрибуты

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

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

 

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

 

Тегтер	Мәні
<I>…..</I>	Курсив (Italic)
<B>…</B>	қою (BOLD)
<TT>…</TT>	Телетайп
<U>…</U>	Асты сызылған
<S>…</S>	Сызылған текст
<BIG>…</BIG>	Үлкейтілген фонт
<SMALL>…</SMALL>	Кішірейтілген фонт
<SUB>…</SUB>	Жолма-жол символдар
<SUP>…</SUP>	Жол үсті символдар

 

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

Тегтер	Мәні
<EM>…</EM>	Типографиялық қою
<CITE>…</CITE>	Цитата
<STRONG>…</STRONG>	қою
<CODE>…</CODE>	Мысал кодын көрсетеді (мысалы, программа коды)
<KBD>…</KBD>	Клавиатура арқылы символдарды еңгізу мысалы
<VAR>…</VAR>	Айнымалылар
<DFN>…</DFN>	Анықтау
<Q>…</Q>	Жақшаға алынған мәтін

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

<DL>тегі

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

 

Табуляция

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

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

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

  <TAB ID=”tabone”> 

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

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

 

Тізім

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

<UL>тегі

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

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

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

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

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

    <UL>

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

    <LI> тізімнің екінші элементі

    <LI> тізімнің үшінші элементі

    </UL>

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

<HR>тегі

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

<PRE>тегі

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

<BLINK>тегі

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

 

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

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

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

 

Дәріс№11-12 Өзін-өзі тексеру сұрақтары немесе тесттер

1.html-құжатының құрылымы. Беттің құрылымдық элементтері.Элементтер типі.

2.WWW-сервисінің жұмыс тәртібі. Сервер және клиент арасында мәлімет алмасу. Формалар.

 

 

Дәріс№13-14. WEBТЕГІ  ГРАФИКА

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

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

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

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

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

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

 

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

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

    Бейнелерөзінің ақпараттылығымен пайдалы болуы мүмкін және Web – бетке көз тартар түрбереді. Бейнелерді қолдануда кең таралған жағдайларды қарастырайық:

—       іскерлік беттегі компанияның логотипі;

—       жарнамалық хабарландыруға арналған графика;

—       әртүрлі суреттер;

—       диаграммалар және графиктер;

—       шығармашылықтар шрифтер;

—       бет авторының қолы;

—       графикалық жолдың горизонтальды бөлінді сызықретінде қолданылуы;

—       әдемі маркерленген тізімдерді құруға арналғанграфикалық маркерлердің қолданылуы.

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

 <IMGSRC =”picture.gif”>

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

<AHREF=”файлдың немесе бейненің адресі”>

<IMGSRC=”picture.gif”> </A>

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

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

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

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

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

<IMG SRC= ”picture.gif ” WIDH=413 HEIGHT=356>

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

    ALT=атрибуты

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

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

    <IMG>тегі 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  <Map> тегтері үшін ғанаберілгендерді қояды.  USEMAP атрибутымен бірге бейне тегін өзіңіз беруіңізгетура келеді және оны </MAP> тегінен кейін бірақ аласыз. USEMAP атрибутындакарта атының алдынан # символын қоюды ұмытпаңыз:

<IMGSRC=” mymap.gif ” USEMAP=”glava1~2.shtml#sitemap”>

 

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

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

<AHREF=”path/somemap.map“>

<IMG SRC=” path/somemap.map “ ISMAP> </A>

    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-ДАКЕСТЕНІҢ ЖАЗЫЛУ ТӘСІЛДЕРІ

·    <TABLE>, <TR>, <TD>, <TH>, <CAPTION>.

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

 

<TABLE>, <TR>, <TD>, <TH>, <CAPTION>

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

     <TR> тегі.

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

          <TD> тегі.

       Кесте жолының ішінде әдетте берілгендер ұяшығы орналасады.Мәтін немесе бейне құрайтын әрбір ұяшық <TD> </TD> тегтеріменқоршалуы керек. Жолдағы <TD> </TD> тегтерінің саны ұяшық санынанықтайды. <TD> </TD> тегтерінің бес сыңарлы жолы бес ұяшықтантұрады.

     <TH> тегі.

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

     <CAPTION> тегі.

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

 

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

 

     NOWRAP атрибуты .

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

     COLSPAN= атрибуты.

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

     ROWSPAN= атрибуты.

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

     WIDTH= атрибуты.

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

    UNIT=атрибуты.

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

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

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

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

COLSPEC=атрибуты.

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

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

<TABLE UNIT= PIXELS COLSPEC = “L10 C15 J25D30”>

DP=атрибуты.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

BORDER=атрибуты.

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

CELLSPACING= атрибуты.

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

 

Дәріс№15-16. Өзін-өзі тексеру сұрақтары немесе тесттер

1. Статикалықжәне динамикалық құжаттарды өңдеудегі ерекшеліктер.

2. Белгітілдердің жалпы принциптері.

 

 

Дәріс№17-18. БЕТТІҢ ДИЗАЙНЫНДА КЕСТЕЛЕРДІ ҚОЛДАНУ

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

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

 

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

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

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

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

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

 

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

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

    <BODYВАСКGROUND=сооlbg.gif ВGCOLOR= # FF0000> 

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

 

Дәріс№17-18. Өзін-өзі тексеру сұрақтары немесе тесттер

1. Форма менмазмұнның ортогональдық принципі

2. HTML –діңерекшеліктері

3. XML –діңерекшеліктері

 

 

Дәріс№19-20. ФРЕЙМДЕР

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

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

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

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

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

 

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

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

 

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

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

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

 

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

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

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

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

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

 

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

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

 

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

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

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

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

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

Сіздіңкөптеген қолданушыларыңызда әлі фреймдермен жұмыс істей алмайтын браузерлербар. Сол себепті сіздің негізгі беттеріңізді фреймсіз ұсынған жөн. Егер сіздіңфреймдік құрылымды бетіңізде ескірген браузерлі оқырман болса, онда осы беттеорналасқан < 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>

    <BODYbgcolor=#FFFFFF>

    <CENTER>

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

    <HR>

    <APPLETCODE=hello width=200 height=100>

    Егер сіздің браузеріңіз 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=numberof picsels]

    [hspace=numberof pixels]

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

    [HTMLtext]

    </applet>

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

 

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

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

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

арр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 Explorer4.0 версиясымен ғана қолданыла алады.

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

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

        <style type =”text/css”> <! – стильдің жазылуы — > < /style>

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

         <style type =”text / javascript”> <! – стильдің жазылуы — ></style>

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

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

<html><head>

<styletype =”text/css”>

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- нотациядажазайық.

<html><head>

<styletype =”text / javascript”>

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 endof style sheets definition */

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

<html><head>

<linkREL=STYLESHEET TYPE =”text/css” HREF://LOCALHOST/CSS.HTM>

</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—>

<HEAD><style TYPE=”text/css”>

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>

<BODYbgcolor = lightyellow>    <center>

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

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

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

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

<hr></center>

<p><spanclass = 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 атрибутының көмегімен қолдануға болады.

<styletype = “text/css”>

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

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

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

<styletype = “text/css”> all.class1 {font-size: 12pt; color = blue}</style>   

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

<styletype = “text/css”> all.class1 {font-size: 12pt; color = blue} #C1{font-size:20;} </style> 

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

 

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

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

 

 

 

 

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

 

Дәріс№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 inobj)

    {        str= obj[i]   }

if..else — шартты оператор

    if(i>0)

    {        …      }

    else

    {        …      }

wile — шартты цикл

    wile(j==k)

    {        j++;   k—;    }

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

    var kuku= kuku

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

 

Оқиғалар

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

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

NetscapeNavigator 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 = newArray (red,white,blue)

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

colors = newArray()

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 = newArray(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 форманың ішінде қолданылса, онда ол осы форманың қасиеті болатынын ескерукерек. Бұл келесі графикалық объектілер үшін әртүрлі құрама аттар қолдану керек дегенді білдіреді.

<imgname=car src=car.gif>

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

    document.car.src= car1.gif

     

    <formname=kuku>

    <imgname=car src=car.gif> 

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

    </form>

    document.kuku.car.src =car1.gif

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

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

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

<HTML>

    <HEAD>

    <SCRIPT>

    functionmulti_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>

    <bodyonLoad=multi_pulti()>

    <imgsrc=image1.gif>

    </body>

    </html>

 

Дәріс№29-30. Өзін-өзі тексеру сұрақтары немесе тесттер

1. Web-сервер және браузердің өзарабайланыс принциптері.

2.Клиент – сервер қатынасының негізі.

3. Жоғары деңгейлі протоколдар.

 

 

 

 

 

 

 

 

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

 

№1зертханалық сабақ

ҚарапайымHTML файлдарын құру

 

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

Сабақмақсаты:

·      Тэгтермен жұмыс істеудіүйрену.

·      Құжатта мәтіндердіорналастыруды үйрену.

 

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

Тапсырма1. ҚарапайымHTML файлын құру.

1. Өз каталогыңызда құрастырылған Web-бетті сақтау үшін KURS бумасын құрыңыз.

2. Блокнот (Notepad) программасын қосыңыз.

3. Ашылған редактор терезеде қарапайымHTML файлын жазыңыз:

4. Файлды RASP.HTM атауыменсақтаңыз.

5. Құрылған Web—бетті көруүшін  Microsoft Internet Explorer браузерінжүктеңіз.

6. Команданы орындаңыз Файл (File), Ашу(Open), көру (Обзор, Browse), KURS бумасынан RASP.HTM файл тауып және оныжүктеңіз. Web- беттің атауы браузердің үстіңгі жоғары жағында жазылғанына көзжеткізіңіз. (“HTML оқу файлы”).

Экран бетінде 1 – суретте көрсетілгендейөз жұмысыңыздың нәтижесін көресіз:

1–сурет.

 

Тапсырма 2. Экрандамәтіндердің орналасуын басқару.

1. №1 тапсырманың 5 – 6 пункттерінорындаңыз.

2. Өзіңіз құрған Web- бетті Түр (View),Источник (В виде HTML) командасын орындау арқылы ашыңыз. Блакнотпрограммасында сіздің web – бетіңіз HTML командасында жазылған терезе ашылады.

 3. Внесите изменения в текст файлаHTMLфайлда мәтінге өзгертулер еңгізіңі,  “Расписание”, “занятий”, “на вторник” сөздерінәр жолға орналастырып:

4. Мәтіні өзгертілген тексті  Файл(File), Сохранить(Save) командасыныңкөмегіменРRASP.HTMфайлда сақтаңыз. Блокнот программасын жазыңыз.

5. Microsoft Internet Explorerбраузеріндің көмегімен алынған Web- бетті қараңыз, F5 пернесін немесе Вид(View), Обновить (Refresh) комадасын орындау арқылы. Экран бетінтекст мәтіні өзгерді ме?  

Ескерту. Алдағы уақытта web- бетткеөзгертулер еңгіссеңіз 2-тапсырманың 4 – 5 пунктерін орындаңыз.

 

 

№2зертханалық сабақ

Форматтаудыңарнайы командалары

 

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

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

 

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

Тапсырма.Форматтаудың кебір арнайы командалары

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

<BR> тэгі жолдыкелесі мәтіннен немесе граикадан ажыртауға арналған. <Р> абзацтэгі жолды анықтайды және де бос орынды көрсетеді. Бұл екі тэгте бірэлементтіболып табылады.

Жолды ауыстыру және абзац тэгтерінқолдану.

1. HTML файл мәтініне өзгерістереңгізіңіз:

2. RASP.HTM файлнаөзгертулер енгізілген мәтінді сақтаңыз.

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

2 – сурет.

 

№3зертханалық сабақ

Тақырыптарстилін қолдану

 

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

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

 

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

Тапсырма. Тақырыптарстилін қолдану.

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

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

2. Шыққан web-беттіқараңыз.

Экран бетіннен 3- суретте көрсетілгендейжазуды көресіз.

3 – сурет.

 

 

№4зертханалық сабақ

Ағымдағыкәріптің өлшемін өзгерту

 

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

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

 

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

Тапсырма. Ағымдағықәріптің өлшемін өзгерту.

Тэг шрифта <FONT> қаріп тэгі1-ден 7-ге дейінгі аралықта белгілеген мәтін орнында ағымдағы қәріптіңөлшемін өзгертеді.

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

2.   <FONT> тэгінқолданып “занятийна вторник”мәтіннің қәріпін өзгертіңіз.

3. Абзац және жолды ауыстыру тэгі жәнетекст фрагментін ерекшелу тэгтерін қолданып HTML- құжатмәтінін безендіріңіз.

 

 

№5зертханалық сабақ

Қәріптүсін және  гарнитураларды орнату

 

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

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

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

Гарнитура және қәріп түсі.

Тэг <FONT> тэгі өлшемдеріжәне гарнитураны, текст түсін өзгертуге мүмкіндік береді. Шрифт гарнитурасынөзгерту үшін <FONT> тэгіне FACE атрибутын қосу арқылыөзгереді. Мысалы, Arial шрифмен тексті жазу үшін мына жолды жазукерек:  <FONT FACE=ARIAL>.

Шрифт түсін өзгерту үшін <FONT> тэгіндеCOLOR=X атрибутын қолдануға болады.

Х орнына түстің атауын (жақшаға) немесеоналтылық мәнін жазу керек. Түсті оналтылық санмен бергенде оны үш түстке бөліпқарастыруға болады: қызыл (R — Red), жасыл (G — Green), көк (В— Blue), олардың әр қайсысы 0-ден ҒҒ –ке дейін мән қабылдайды. Бұл жағдайдаRGB форматымен жұмыс істейміз. 1–кестеде RGB форматтағы түстерберілген:

 1-кесте.

RGB форматтатүстердің жазылуы

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

2. Құжат мәтінініңстилін, өлшемін, түсін, гарнитурасын өзгертіңіз.

 

 

№6зертханалық сабақ

Мәтіндігоризонталь туралау

 

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

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

 

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

Тапсырма. Мәтіндігоризонталь туралау.

RASP.HTM файлына түзетулеренгізіңдер:

Экраннан4-суреттегі бейнені көресіздер.

4-сурет

 

 

№7 зертханалық сабақ

Мәтін мен фонныңтүсін беру

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

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

 

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

Тапсырма. Мәтін менфонның түсін беру

Фон мен мәтінді бейнелеу кезіндебраузерлер үнсіздік бойынша таңдап алынған түстерді пайдаланады, олар браузердібаптау параметрлерінде берілген.Егер сіздің басқа түс бергіңізкелсе, онда оныHTML  файлындағы    <BODY> тэгінде орындау керек. BGCOLOR=атрибуты беттің фон түсін анықтайды, ТЕХТ=  барлық беттер үшін мәтінтүсін береді, LINK= және VLINK= қарастырылмаған жәнеқарастырылған сілтемелерге сәйкес түсін анықтайды (соңғы екі параметр кейінқарастырылатын болады).

RASP.HTM файлына түзетулеренгізіңдер:

 

 

№8 зертханалық сабақ

Web-бетте графиктердіорналастыру

 

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

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

 

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

Тапсырма. Web-беттеграфиктерді орналастыру

 <IMG> тэгіқұжатта бейнені қоюға мүмкіндік береді. Бейне тэг орналасқан құжатбетінде пайда болады. Берілген тэгжалғыз болып келеді. Web-те графика, ережебойынша, үш форматта таралады: GIF, JPG, PNG. Келесі тапсырманы орындаубарысында, CLOCK.GIF графикалық файлы біздің Web-бет орналасқан KURSжұмыс каталогында сақталады деп есептейміз 

RASP.HTM файлына түзетулеренгізіңдер:

 

Экраннан5-суреттегі бейнені көресіздер.

5-сурет

<IMG> тэгінің2-кестеде берілген қосымша бірнеше атрибуттары бар. Олар тэгтің  IMG кодынанкейінгі кез келген жерінде орналасуы мүмкін.

2-кесте

Бейнелердің атрибуттары

 

 

№9 зертханалық сабақ

Бейненің атрибуттарынорналастыру

 

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

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

 

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

Тапсырма1.Бейненіңатрибуттарын орналастыру.

RASP.HTM файлына өзбеттеріңше түзетулер енгізіңдер: ALT, BORDER, HEIGHT, WIDTH сияқтыграфика атрибуттарының қолданылуын қадағалаңдар.

Ескерту. Әрқашангарфикалық файлдың өлшеміне (байт бойынша) мән беріңдер, өйткені Web-беттіңжүктелуіне әсер етеді.

 

 

№10 зертханалық сабақ

Web-бетте бейненіңфонын орналастыру

 

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

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

 

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

Тапсырма. Web-беттебейненің фонын орналастыру

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

Фон түріндегі графика <BODY> тэгіарқылы беліделі.

RASP.HTM файлына түзетулеренгізіңдер:

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

6-сурет

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

7-сурет

 

 

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

Кесте құру

 

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

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

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

Тапсырма. Кесте құруды.

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

Кесте негізгі үш бөліктен тұрады:

·             кестеатауы;

·             бағанатақырыбы;

·             ұяшықтар.

Кесте жол бойынша толтырылады (солдан оңғақарай — )

Кесте жол бойынша толтырылады (солданоңға  — жол бойынша, одан кейін келесі жолға өтеміз). Әр бір ұяшықты толтырукерек. Бос ұяшықтарды құру бос орынды қолданамыз.

1. Блокнот программасын жүктеңіз.

2. Редатор терезесінде келесі текстітеріңіз:

3. 5.НТМ атты файл құрыңыз.

4. Құрылған Web- беттікөру үшін  MicrosoftInternet Explorer браузерін жүктеңіз.

Экран бетінен 8 – суретте көрсетілгендейкөруге болады.

8 – сурет.

 

 

№12 зертханалық сабақ

Гипертексті байланыс орнату

 

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

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

 

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

Тапсырма. Гипертекстібайланысты орнату

HTML тілінің маңызды қасиеті құжаттағысілтеме арқылы келесі құжатқа өту мүмкіндігі.

Важнейшим свойством языка HTML является возможностьвключения в документ ссылок на другие документы.

Сілтемелер болуы мүмкін:

— өшірілген HTML-файлға,

— кейбір ағымдағы HTML-құжатнүктесіне,

— HTML – құжат болмайтын кез келгенфайлға

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

Бір құжаттағы сілтемелер

Мұндай сілтемелер екі бөліктен тұрады:белгі және сілтеменің өзі. Белгі сілтеме өтетін кездегі нүктені анықтайды. Сілтемебелгі атауын қолданады. Сілтемелер браузер баптауына байланысты түспен немесесызылған болып беліленеді. Түстің өзгеруіне байланысты LINK= және VLINK=<BODY> тэгі сілтемеде қолданылады.

Сілтемені суреттейміз:

<A rel=nofollow ugc target=_blank href=#ПН>Понедельник</А>

Сілтеме бойынша өту керек белгінің атауынаалдына # символықойылады. “>” және “<” символдарыарасына (“Понедельник”) текстіорналасады.

Белгіні анықтаймыз:

<A NAME=ПН>Понедельник</А>

 

1. 5.НТМ файлтолықтырыңыз, апта күндерінің атауымен кестені толықтырып, Web-беттің басынаорналастырыңыз:

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

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

4. Қалған апта күндеріне үшін күнтізбекестесін құрыңыз.

5. Файлдысақтаңыз.

6. Алынған Web-беттікөріңіз.

Экран бетінен 9 – суретте көрсетілгендейкөруге болады.

9 – сурет.

 

№13зертханалық сабақ

БасқаHTML – құжатқа сілтеме құру

 

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

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

 

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

Тапсырма. Басқа HTML –құжатқа сілтеме құру.

Сілтеме белгіленген сөзге немесе фразағашерту арқылы басқа файлға өтеміз.

Сілтемені суреттейік:

<А rel=nofollow ugc target=_blank href=5.HTM>5 класс</А>

Файл атауынан (5.НТМ) кейін “>” және “<” символдарыныңарасына (“5класс”)текстін орналастырамыз, осы файлға өту үшін оны шерту керек.

1. RASP.HTM файлын браузерге жүктейміз.

2. файлға өзгертулер еңіземіз:

3. Файлды сақтаймыз.

4. Алынған Web-беттіқараңыз.

Экран бетінен 10 – суретте көрсетілгендейкөруге болады.

10 – сурет.

 

№14 зертханалықсабақ.

Басқа HTML – құжатқасілтеме құру

 

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

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

 

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

Тапсырма. Басқа HTML –құжатқа сілтеме құру.

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

2. Алынған Web-беттіқараңыз.

Экран бетінен 11 – суретте көрсетілгендейкөруге болады.

11 – сурет.

Сілтеме ретінде  HOME.GIF файлындаорналасқан суретті (оңға және жоғарыға қараған бағыт) қойдық.

 

№15зертханалық сабақ.

Текстфрагменттерін белгілеу

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

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

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

Тапсырма. Текстфрагменттерін белгілеу.

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

2. Алынған Web-беттікөреміз.

Комбинерленген белгілеулерді қолдануғаболады.

Бірақта комбинерлік тэгтерді жазған кездекелесі ережелерді білу керек:

<Тэг-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-технологияларының қолдану салалары мен дамуперспективалары.