+ All Categories
Home > Documents > Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web...

Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web...

Date post: 22-Feb-2020
Category:
Upload: others
View: 8 times
Download: 0 times
Share this document with a friend
71
Дәрістердің тірек конспектісі Ф Нысан ПМУ ҰС Н 7.18.2/05 Қазақстан Республикасының Білім және ғылым министрлігі С. Торайғыров атындағы Павлодар мемлекеттік университеті Физика, математика және ақпараттық технологиялар факультеті Дәрістердің тірек конспектісі «Web-технологиясы» пәні бойынша 050703 «Ақпараттық жүйелер» мамандығының студенттеріне арналған
Transcript
Page 1: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Дәрістердің тірек конспектісіФ

НысанПМУ ҰС Н 7.18.2/05

Қазақстан Республикасының Білім және ғылым министрлігі

С. Торайғыров атындағы Павлодар мемлекеттік университеті

Физика, математика және ақпараттық технологиялар факультеті

Дәрістердің тірек конспектісі

«Web-технологиясы» пәні бойынша050703 «Ақпараттық жүйелер» мамандығының студенттеріне арналған

Павлодар

Page 2: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Дәрістердің тірек конспектісін бекіту парағы

ФНысан

ПМУ ҰС Н 7.18.1/05

Бекітемін ФМ және АТ факультетінің деканы

_____________ Тлеукенов С.К. «__»_________20__ж.

Құрастырушы: п.ғ.к., аға оқытушысы Майдисарова Д.С.

Информатика және ақпараттық жүйелер кафедрасыӘдістемелік нұсқаулық

«Web-технологиясы» пәні бойынша050703 «Ақпараттық жүйелер» мамандығының студенттеріне арналған

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

«__»_______________________200 ж. №_____ хаттама

Кафедра меңгерушісі ___________ Ж.К.Нұрбекова (қолы)

ФМ және АТ факультеттің әдістемелік кеңесінде құпталған ______________________________________

«___»___________200 ж. №______ хаттама

ӘК төрағасы _______________ Кишубаева А.Т.

Page 3: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы
Page 4: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Тақырып 1. Web-технологияларының негізгі ұғымдарыWeb-технологияның ұғымдары. Статистикалық және динамикалық Web-беттер. Web-қосымшаларды жасау құралдарына шолу. Web-қосымшаларды жасаудың аспаптық құралдары. Web-қосымшаларды жасаудың бағдарламалау құралдары. Сайтты жоспарлаудың негізгі кезеңдері. Web-сайттың логикалық құрылымы. Сайттардың базалық құрылымдар.

Web-технологияның ұғымдары.WWW ўйымына арналған қўралдардың жиынтығы бјрін Web - технологиялар астында түсінеміз. Сервер жақтары екі топтар - технологияға бөлінеді сондықтан јрбір сеанста екі жақтар - сервер жјне клиент , Web - технологияларды бірлесіп јрекет қылады ( server - side ) жјне технологияның клиент жақтары ( client - side ). Технологияларға Web - беттердің жасау барлық технологиялары клиент жағынан (HTML, JavaScript, DHTML ) жатады, ал технологияларға интернетте сервер жағынан базаларға рўқсат ететің (CGI, PHP)технологиялары жатады.

Статистикалық және динамикалық Web-беттер.WEB- сайттар екі түрлі болуы мүмкін: статистикалық және динамикалық. Статистикалық Web – беттер қолдан жасалады, содан кейін сақталады және сайтқа жүктеледі. Әр сайын осындай беттін мазмұның өзгерту үшін, пайдаланушы оны өз жұмыс компьютерде өзгертіп (мысалы html- редакторды пайдаланып), сақтайды және қайтадан Web – сайтқа жүктейді.Динамикалық Web – сайттардың көрсетілетін әр бет шаблонды бетке негізделген, оған мәліметтер қорнында сақталатын тұрақшы өзгеріп отырған ақпараттар еңгізіледі. Сонымен сайттың мазмұның жаңарту үшін жай жаңа бет үшін мәтін қосылады, содан кейін ол мәліметтер қорына арнайы механизм көмегімен кірістіріледі. Нәтижесінде сайт өз өзінді жаңартады сияқты.

Web-қосымшаларды жасаудың аспаптық құралдары.Web - беттердің қўру принципіне сјйкес барлық аспаптық қўралдың оларды жасаулар екі топқа бөлуге болады. Біріншіге олардан, толық сјйкестік тјртібінде Web - беттердің јрлендіруі мүмкіндік беретіндер жүйелер (WYSIWYG ), ал содан соң өздері қажетті - HTML -код автоматты қалыптастырушылар жатады. Нақ мына топқа сондай јйгілі өнімдері, Microsoft FrontPage сияқты, Microsoft Office пакет бағдарламалары жатады. Екінші топ - HTML - редактор, HTML - кодты өздері жасайтын кјсіпқойларға арналған.

WYSIWYG-редаторы- MS Word- Web – беттерді өзгертуге ыңғайлы- MS Power Point – мультимедиялық презентацияларды өндеуі

Page 5: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

- MS Front Page – клиент/сервер ортада визуалдық құрал Web – беттерді жасауға үшін

Кәсіби HTML редакторлар

MS Internet Assistant – форматтарда қўжаттардың өзгертуіне арналған бағдарламалардың сериясы, HTML-форматқа Word, Excel, Power Point, Access –тің құралдарымен арқылы жасалынған. Netscape Suite pot – көпплатформалық интеграцияланған пакет, Интранет-жүйесін өндеуге арналған; Borland Intranet Tools for Visual dBase Professional – dBase-кестелерден HTML-беттерге ақпараттарды салуға мүмкіндік береді; Borland Intra builder – предназначен для быстрой разработки приложений, ориентированных на использование программ просмотра (браузеров) в качестве клиентских мест для доступа к БД во внутренних корпоративных сетях Интранет и Интернет; Macromedia Flash – анимация эффектімен Web-графиканы жасауға арналған; Macromedia Autho ware – для визуального создания приложений для Интранет/Интернет и интерактивных обучающих программ; Macromedia Director – для разработки мультимедийных ресурсов, ориентированных на использование Интернет; Macromedia Extreme 3D – для создания объемной графики для Интернета, с поддержкой языка виртуальной реальности VRML2, анимированных GIF и др.; Macromedia Fire Work – арнайы жасалынған ақпараттық беттерге, графиканы өндеу және редакциялау ушін; Macromedia FreeHand – жоғары сапалы жариялаулардың, графиктар жылдам жјне жеңіл жасаулары үшін; Macromedia Script Editor – предоставляет возможности для использования скриптов в Macromedia FreeHand и др. Home Site – ақпараттық беттерді және сайттарды өңдеуге және редакциялауға арналған; MS Internet Studio – профессиональный инструмент для создания мультимедийных и интерактивных Web-страниц, содержащих сложные гипертекстовые документы, графику, звуковые эффекты, анимацию; Macromedia Dreamweaver – ақпараттық сайттарды жасауға ушін, сочетает визуальное программирование с полным доступом ко всем возможностям языка.

Page 6: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Сайтты жоспарлаудың негізгі кезеңдері.

Жоспарлау кезеңі - сайтты өндеуде өте маңызды кезеңі. Сонымен , сайтпен жумыс бастаудың алдында не істеу керек?

Алдымен дұрыс мақсатын қою керек.Что он должен делать: рассказывать о ком-либо или о чем-либо, привлекать клиентов, помогать решать какие-то проблемы, просвещать или развлекать. Мақсатқа байланысты сайттын құрылымы әр түрлі болу мүмкін. Сайтта қандай ақпарат болатын анықтау керек.Сол ақпаратты алдымен жинау керек, сайтпен жұмыс істегенде сонан соң оның іздемеу үшін. Все тексты, изложения, файлы, которые вы намерены выложить в Сеть, должны быть на вашем компьютере.Сайтты әрлендіруі қандай кілтте орындалған болады шешу керек. Будет ли он консервативным, строгим или затейливым. Бұл кезеңде қалай web- беттер болып көрінеді қағазға бейнелеу жақсы.Web-сайттың логикалық құрылымын ойлану және оны суретке салу керек. Например, для домашнего сайта идеальна такая структура: начальная ("домашняя") страница с краткими сведениями о хозяине, приглашением посетить другие страницы сайта и набором ссылок на них; на других страницах размещаются информация об увлечениях, проектах разработках (если это программист, музыкант, художник, то список ссылок на файлы программ, аудиоклипов или картин), фотогалерея и странички с набором "дружественных" ссылок и более подробными сведениями об авторе, с почтовым адресом и фотографией.Сайттың физикалық құрылымын ойлап табу, т. е. как отдельные файлы, составляющие сайт, будут "раскиданы" по папкам.

Web-сайттың логикалық құрылымы.Web-сайттың өте маңызды белгісі: оның бөлектердің алдын ала сәйкестікте өңделгенмен құрылыммен беттердің тар өзара байланыс. Осындай құрылымы – логикалық құрылымы деп аталады. Сайттың әртүрлі беттерінің өзара байланысы бейнелеп түсіндіреді.Структура узла (Түйін құрылымы)Одним из главных слагаемых успеха узла является правильная организация его структуры. От нее зависит не только удобство навигации, но и легкость его пополнения, добавления разделов.Плоская структура (Жазық құрылым)Оны жұлдызды немесе полносвязная деп атайды да. Онын түрі: бас құжаты (домашняя страница), осы түйінің басқа құжаттарға сілтеме болады. Сол құжаттарда басқа құжаттарға және бас құжатқа да сілтеме болады.Такую структуру имеют многие домашние страницы и корпоративные узлы "визитки". Под узлом "визиткой" подразумевается некий узел имеющий

Page 7: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

типичные страницы: "о компании", "наши услуги", "как с нами связаться", "наши партнеры", "наши клиенты". Из вышесказанного ясно, что такая структура имеет смысл для узла, насчитывающего не более 5-9 документов.Линейная структура (Ұзындық құрылым)Сонымен қатар мына құрылымды жүйелі деп атайды. Ол құжаттардың жүйелі байлаулы сериясын ұсынады , әрбірде алға ( алысырақ ) және артқа сілтемелер тек қана болады. Эта структура используется очень редко и подходит для простых презентаций и определенных видов учебников. Древовидная структура (Ағаш сияқты құрылым)Сондай құрылым құжаттардың ағаш файлдық құрылымына сай болатын түйінің физикалық құрылымын толық қайталайды. Өз түрінде ол еш қайда колданылмайды, осы құрылымын бұзатын ілмектер әрқашан бар болады. Но она служит базой для организации сложной структуры практически всех крупных узлов.Комбинированная структура (Құрамалы құрылым)Құрамалы құрылым стандартизацияны ерiксiз көнедi. Iрi түйiндер , тiзбе болсалар, бiрлескен түйiн немесе ақпараттық түйiн келесi құрылымдарды алады: Жоғарғы деңгейде құжаттардың жазық құрылымы ұйымдасады. Оның ішіне үй бетi және түйiннiң бағытталғандықтарынан байланысты қосалқы құжаттардың тобы және/немесе бөлiмдердiң индекстерi кіреді. Жiп-жиi олардын бәрі толық немесе жартылай өзара бiр-бiрiмен байланыстар болады. Ал бұл бөлiмдерден немесе тiкелей үй беттерiнен құжаттардың ағашқа ұқсас құрылымдары "бiр шоқтар" салбырап тұрады, тек қана өз түзулерi және ата-аналарға сiлтемелерi жиi болатын. Бұл қандыағаштардың жапырақтарымен жеке құжаттар бола алады, жазық немесе сызықты құрылымдар.Навигация по узлу (Түйiн бойынша навигация)Түйiн бойынша навигация - бұл механизм, қай келушiге табуға мүмкiндiк беретін, оған көрсетуге білдіресіз. Өз мақсатының келушiсi жетедi ме әлде кетеді сіздін сайттан түйiн бойынша навигация түсiнiктiлiктерінен, оның элементтерiнiң ойлап iстегендiктерiнен тәуелдi болады. Әдемi емес суреттер, тап ыңғайлы навигация келушiлерді сiздiң түйiнiңiзге қайтарылдыра алады.Организация домашней страницы (Үй бетiнiң ұйымы)Негiзгi элементтердiң бiрлерi түйiн бойынша навигацияның үй бетiнiң ұйымы болады. Сервердiң түбiрiнiң сұрау салуын көрсететің сол бет, мысалы:http://www.webclub.ru/ Үй беттерiнiң екi негiзгi түрлерi бар болады: презентация және ақпараттығы. Презентациялық беті аса үлкен емес түйiндерге жасалады, ол өте әдемі жасалынады, графикадан тұрады және сiлтемелердiң саны аз болады. Осындай бет бір экранға орналастыру керек.

Page 8: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

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

Сайттардың базалық құрылымдар.

Бір-бірімен сілтемелер арқылы байланысқан HTМL – файлдар Web-сайт немесе Web-түйін құрайды. Web-сайт жасаудың негізгі екі себебі бар. Біріншіден, тұтынушыларға керекті ақпаратын табуы жеңілдейді. Екіншіден, Web-түйінді жаңарту мен демеу оңайланады.Web-түйінінің негізгі құрылымдарын қарастырайық.1.     СтандарттыБұл Web-сайтының ең қарапайым және танымал құрылымы. Вход на Web-сайтқа кіру басты бет арқылы іске асады. Қалған барлық беттер өзара басты бет арқылы байланысқан.Бұл құрылым абыройы көркемділік пен навигация жеңілдігі болып табылады. Оған қоса Web-сайт беттерін қосу мен жою оңай.Стандартты құрылым түрі келесі (1.2 сурет). 

 1.2 сурет - Web-сайттың стандартты құрылымы. 2.        КаскадБұл құрылымда да кіру мен шығу басты бет арқылы іске асады. Қалған барлық Web-беттер өзара тізбектеп байланысқан (1.3 сурет). Соңғы бетті ашу үшін барлық алдыңғы беттерді өту керек. 

Соңғы бет 

Page 9: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

  1.3 сурет  - Web-сайттың каскадты құрылымы. 3.     НебоскребҚұрылымы көпқабатты үйге ұқсас. Әр қабатта бірнеше бет бар. Басты бет ең астында болады. Web-сайтқа кіру мен шығу басты бет арқылы іске асады. (1.4 сурет). Бұл модельде басқа бетке өту үшін дұрыс жолмен жүру керек.  

 1.4 сурет –  «Небоскреб» құрылымы. 4.     ӨрмекБұл құрылым ерекшелігі басты беттің болмауы болып табылады. Барлық беттер бір-бірімен өрмек түрінде байланысқан (1.5 сурет). Іс жүзінде кез келген беттен

Page 10: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

басқа кез келген бетке өтуге болады. Web-сайтқа кіру мен шығу кез келген бет арқылы іске асады. Бұл құрылым кемшілігі оның күрделігі болып табылады.   

1.5 сурет – «Өрмек» құрылымы. Өз Web-сайтыңыздың құрылымын таңдап, бастысынан бастап Web-беттеріңізді жасай бастаңыз. Web-беттеріңізге мәнді атаулар беруге тырысыңыздар. kafedra.htm, grupa.htm түріндегі файлдарды  Page 1.htm, Page 2.htm мен т.б. файлдарына қарағанда пайдалану ыңғайлырақ. Басты бет файлы index.html деп аталуы керек.Басты Web-бетте төменгі колонтитул болу қажет. Мұнда Web-бетті авторы, беттің e-mail мекен-жайы, оның соңғы рет жаңарғандығы мен т.б. жайлы ақпарат орналасуы шарт. Мысалы:<BR><I> Last Update April 21,2004 </I><A HREF= “mailto: aisfit @ kstu.kz ”> АИС кафедрасы </A>Беттер арасында сілтемелерді ұйымдастырудың мәні зор. Сілтемелерді орналастырудың түрлі әдістері: маркіленген тізім, кесте, мәтін пен т.б. Сілтемелерге графикалық бейнелерді пайдалану өте атақты.

Тақырып 2. Web-технологияларды қолдану орталарыИнтернеттің клиент-серверлік сәулеті. URI. URL. Интернет хаттамалары. Интернет қызметтері. Web-браузерлер. Internet Explorer браузерінің объекттік моделі. Интернетте сайтты жариялау тәсілдері. Хостинг. Сайтты индекстеу. Индекстеу ережелері. Іздестіру машиналар.

Page 11: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Интернеттің клиент-серверлік сәулеті. URI. URL.Барлық Интернетке жататын программалары екi үлкен топтарына жiктеледi: клиенттер мен серверлер. Сервер – бағдарламалары программам-клиент- бағдарламаларға рұқсат беру ресурстарды береді. Клиенттер, егер оларға қандай да бір файл керек болып қалса, олар клиент сұрау салуы қалыптастырады және оны серверге жібереді. Сервер сол сұранысты жұмыстанады және серверлiк жауабын жібереді, болатын сұралатын мәлiметтер немесе қателiк туралы хабар, егер керек файылдарға руқсат болмаса.Такая компьютерная архитектура, иначе говоря, принцип построения вычислительной системы или сети, называется архитектурой "клиент-сервер" или двухзвенной. Именно на основе двухзвенной архитектуры функционируют почти все сервисы Интернета. В том числе, и WWW.В случае WWW клиентами выступают программы Web-обозревателей – Web-браузеры (программы для просмотра Web-страниц). Серверами же являются так называемые Web-серверы, обрабатывающие запросы Web-обозревателей и высылающие им нужные файлы.Каждый ресурс в Web - документ HTML, изображение, видеоклип, программа и т.д. - имеет адрес, который может быть закодирован с помощью универсального идентификатора ресурсов (Universal Resource Identifier), или URI.URIӘдетте URI үш жиiректен тұрады: 1. Ресурқа ену үшін қолданылатын тетiктiң схемасы. 2. Ресурс орналасқан машинаның аты. 3. Ресурс шындығында жол түр тап қалған ат. Мысалы: http://www.w3.org/TR/PR-html4/cover.htmlОсы URI төмендегiшемен оқыла алады: осы документті http протоколмен алуға болады, ол www.w3.org машинада орналасқан, "/TR/PR-html4/cover.html" – осы документтке жол. Кроме того, в документах в формате HTML Вы можете увидеть схемы "mailto" для электронной почты и "ftp" для протокола FTP. URI – ның тағы бір мысал. Ол қолданушының почта жәшiгiне жатады: ...текст... <A href="mailto:[email protected]">Джо Кулу</A> комментарий жіберіндер.Кейбір URI ресурстың ішінде орына көрсетедi. Осы тип URI "#" символмен бітеді, (идентификатор фрагмента) нұсқағыш шығады. Мысалы, келесі URI section_2 атымен фрагментке көрсетеді:http://somesite.com/html/top.html#section_2Салыстырмалы URI атты схемасының ақпараты болмайды. Путь в нем указывает на ресурс на машине, на которой находится текущий документ. Относительные URI могут содержать компоненты относительного пути (например, ".." означает один уровень выше в иерархии) и идентификаторы фрагментов.

Page 12: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Салыстырмалы URI толық URI ға, негізгі URI көмегiмен тура келедi. Салыстырмалы URI-ң мысалы: бізде негізгі URI бар болсын "http://www.acme.com/support/intro.html". Салыстырмалы URI келесі сілтемеде: <A href="suppliers.html">Suppliers</A>толық URI – ға өзгереді "http://www.acme.com/support/suppliers.html", ал салыстырмалы URI келесі фрагментте <IMG src="../icons/logo.gif" alt="logo">толық URI – ға өзгереді "http://www.acme.com/icons/logo.gif". HTML- да URI қолданылады үшін: Басқа құжаттарға немесе ресурстарға сілтемелер; стильлердiң сыртқы кестелерге немесе скриптерге сілтемелер; объектілерді немесе апплеттерді суреттердiң бетiне қосындылар; суреттердiң жасаулары; формалардың жiберулерi; кадр арқылы құжаттарды жасау; сыртқы көздерге(источники) сілтемелер; құжаттарды суреттейтiн метамәлiметтер тұралы сілтемелер.URLURL (Uniform Resource Locator -унифицированный локатор ресурсов). URL, кез келген кәдiмгi мекенжай, жеке компоненттерден тұрады. Каждая часть адреса сужает область местонахождения тех или иных ресурсов, будь то Web-узел, Web-страница, звуковой файл или графическое изображение.1. URL мекенжайдың бiрiншi бөлiгі протоколдың аты болады. Возможными значениями протоколов могут быть: http (для Web-узлов), ftp (для серверов FTP), gopher (для узлов Gopher), telnet (для узлов Telnet) и news (для серверов групп новостей.

http :// www . cybercise . com / mom / jzr . html # skd 2. Екінші бөлiгі Web-сервердің аты болады:

http://www.sybercise.com/mom/jzr.htm#skd3. Кезектi бөлiк URL мекенжайдың Web-сервердің түйiнің атын білдіреді. Осы бөлікте «/» - түйiннiң әр түрлi облыстары бөледi.

http://www.sybercise.com/mom/jzr.htm#skd4. Төртінші бөлік URL мекенжайдың құжаттың атына сәйкес келедi. Web-парақтың құжаттары .htm немесе .htm1 кеңейтулерді алады.

Протокол

Web-сервердің аты

Жолы

Құжаттың аты

Page 13: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

http://www.sybercise.com/mom/jzr.htm#skd5. Ең соңғы бөлiк URL мекенжайдың белгiнiң аты болады. Белгiнiң аты басқалардаң # символмен бөлінеді және Web-құжатта тиісті жағдайды анықтайды.

http :// www . sybercise . com / mom / jzr . htm # skd

Web-браузерлер. Internet Explorer браузерінің объекттік моделі.Internet Explorer браузердің объекттік моделі:

window - браузердің терезесіне рұқсат (доступ) беретін объект; frames - фреймдарға рұқсат беретін объект:

window... window... ...

document – бүкіл бетті қамтитын объект: all – құжаттың барлық тегтардың толық коллекциясы; forms – формалар коллекциясы; anchors – зәкір (якорь) коллекциясы; appleеs – апплеттер коллекциясы; embeds - ендірілген объектілер коллекциясы; filters – фильтрлар коллекциясы; images – кескіндер коллекциясы; links – сілтемелер коллекциясы; plugins – қосылатын модульдер коллекциясы; scripts - <script></script> блоктар коллекциясы; selection – ерекшелеу коллекциясы; stylesheets – жеке берілген стильмен объекттер коллекциясы;

history – қатысқан сілтемелердің тарихына рұқсат беретін объект; navigator – браузердің сиппатамаларына рұқсат беретін объект; location – ағымды URL қамтитын объект; event – оқиғаларға рұқсат беретін объект; screen – экранның сиппатамаларына рұқсат беретін объект.

Интернетте сайтты жариялау тәсілдері. Хостинг. Сайтты индекстеу. Индекстеу ережелері. Іздестіру машиналар.

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

Page 14: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Администратор сақтаушы iшiндегiсiн сервердің папкасына жазады және программалық қамтамасыз етудiң күйiне келтiредi. Артықшылық - ерекше оңайлық.Екіншесі жайылмаған. Кейбірі тегін Web-сервердер Web-шолушы арқылы файлдарды еңгізуге руқсат береді. Осы әдістің бiр артықшылық бар: жүктеудің оңайлық. Қолданушы еңгізудің өрісіне керек файлдардың атын еңгізеді және Submit (Отправить) батырмасын басады. Кемшiлiктер: файылдарды нақтылы лимиттен (обычно пяти) кем жібереалмайсыз, файлдардың жіберіду тексереалмайсыз және қосуының сенiмдiлiк жоқ.Үшінші өзi таралған. FTP интернет-протокол бар, желілерде файлдарды жіберу үшін қолданылатын. FTP арқылы ҒТР-клиенттен ҒТР-серверге файлдардың жіберуін ұйымдастыруға болады және керсінше серверден клиентке. FTP протоколдың ерекшелігі, клиент FTP-сервермен өзінің локальдық дискпен сияқты жұмыс істейді; ол файлдармен папкаларды құруға, өзгертуге және жоюға, көшіре алады. Третий способ заключается в следующем. Web-сервердің администратор компьютерде ҒТР-сервердің бағдарламаны iске қосады және күйiне келтiредi. Содаң соң автордың сұраумен, которому нужно опубликовать на сервере свой сайт, сол сайтқа түбiрлiк папкасың жасайды және тек қана папкаға автор рұқсат алады. Сайттың авторы ҒТР-клиенттің бағдарлама арқылы ҒТР-серверге косыла алады және өзінің сайттың қайта жасалған папкаға файлдарды көшіреді. Содан соң администратор Web- серверді кескiндейдi, жаңа сайттың бар екендiгiнi "бiлдi" болғандай. Ендігәрі егер авторға файлдарды өзгертуге керек болса, ол қайта ҒТР-серверге қосылып және файылдардың жаңа түрін дискіге алдынғысын өшіріп көшіреді.ҒТР-серверге косылу үшін, қолданушы өзінің логин мен парольды еңгізеді. Оларды қолданушы администратордан алады. Сайтты жариялау үшін атты кіру қолданылады, осындай сақтық шарасы қаскүнемдерге және жат-жалаларға сайтқа жетуге рұқсат бермейді.Осындай тіркеудің әдісі тегін Web-серверлерде қолданылады.

Сайтты индекстеу.Сайтты индекстеу төмендегiшемен iске асады: немесе iздестiру машинасының роботы өзі сіздің сайтқа жолығады, немесе Сіз өзініз тиiстi интерфейстегi (AddUrl) сайтты көрсетiңiз, қандай да бір іздестіру машиналарда бар. Біріншінің кемшілігі - процесстiң созбалауы болады, екіншісінікің – біраз уақытты бөлуге керек. Дұрыс индексацияны жасау үшін келесі ережелерді қолдану керек:

сайттың әрбiр құжатында МIНДЕТТI ТҮРДЕ заголовок (title), ключевые слова (keywords), краткое описание (description) болуы керек. Сiздi әрбiр құнтты іздестіру машинада қолдан тiркеу және Сіздің сайттың индекстеуін бақылау.

Бірақ AddURL-де жай парақты көрсету жеткіліксіз. Необходимо заранее подготовить документ так, чтобы на соответствующие запросы к поисковой

Page 15: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

машине в ее ответе на запрос ссылка на Ваш документ находилась если не первой, то хотя бы в первой десятке ссылок (а лучше, если в этой десятке было несколько ссылок на Вашы документы:-). Для этого в секции HEAD каждого документа Вашего сайта стоит указать "говорящий" Title, KeyWords, Description и Robots.Title: құжаттың басы. Хороший осмысленный заголовок может заставить пользователя из множества других выбрать именно Вашу ссылку. KeyWords: кілтті сөздер. Keywords – ды бір біріне ұқсас істемеу керек. Description: қысқаша құжаттың сипаттау. Оның ішіндегісі қысқаша құжаттың сипаттау ушін қолданылады.

ХостингХостинг – бұл Интернетке тәулiк бойы қосылған сервердегi сайтының орналастыру. Серiктестiктiң Хостинг (хостинг провайдерлер немесе хостерлер) өз серверiнiң қатты дисгiндегi орын және сервердiң қорларына рұқсаттарды iлiгедi: жадқа, процессорге және желiге каналға. Қанша хостинг ерiктестiктiгіне ресурс керек соған сәйкес, қызметтердiң келесi түрлерi танып бiледi:

Виртуалды сервер – тұтынылатын қорлардың қатал шектелген көлемi, сервердің дискіте тұтылынған орын, ескерiлгенi программалық қамтамасыз ету, каналға және серверге рұқсат. Аласалау құн және оңайлық. Сайттардың көбі осындай қызметпен қолданылады. Ерекшеленген сервер – серверді, каналды, сервердiң техникалық қолдаулары және бөлмені жалдау, хостинг провайдерде орналасқан жерде. Сіз орналастырылған домендердің санын және олардың арасында ресурстарды бөлу анықтайсыз. Co-location – сервер сізге жатады, ал сервердің бөлмені хостерден жалдайсыз және әкiмдiк ету және қолдау үшін шарт жасайсыз. Виртуалды ерекшеленген сервер – жинағы емес сервердiң жалдауын мүмкiндiк, тек қана оның қорларының бөлiктерi. Көршiлерден толық тәуелсiздiк. Тоқтату – провайдердің серверде беттiң орналастыруы (кейде почта жәшiктерi берумен).

Хостинг провайдерлер келесi сервистердi iлiгедi: PHP немесе Perl скрипттерді қолдау – егер сiздi интерактивті сайт болу үшiн тiлесеңiз. Самые распространенные скрипты: қонақ ктап, жаңалықтардың лентасы, e-mail –ге жіберетің форма. Қолдау қызметі – мәліметтер қорын, формдарды немесе жүйелерді орнатуға көмек, контенттiң басқарулары. Пошталық аккаунттарды беру – осы арқылы ваше_имя@ваш_домен.ru пошталық жәшіктерді ашуға болады. Қандай

Page 16: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

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

Тегін хостингтің кiлегейлендердiң несiмен?Размещать сайт компании на бесплатном хостинге всё равно, что открывать бутик в лотке на рынке. Уважающая себя компания просто не позволит себе пользоваться услугами бесплатного хостинга, особенно если речь идёт о коммерческом проекте.Тегін хостингтің негізгі минустер:

 Жабысқақ жарнама Бөгелтетiн каналдар Объемның өресiздiк Нашар қолдау қызметi Жобаның мәртебесi күйзелдер Үшінші деңгейдiң доменiн әдемi деп атауға болмайды..

Тақырып 3. Web-қосымшаларды жасау технологияларыТақырып 3.1 Гипермәтінді белгілеу тілдері. HTML, DHTML тілдері

HTML-дің қызметті. HTML-дің қысқаша тарихы. HTML құжаттың құрылымы. HTML элементтері. Функционал бөлімдік элементтері. Басқа құжаттармен байланыстыру. Гипермәтіндік сілтемелер. Динамикалық мүкіндіктерді жасау құрал-тәсілдері. DHTML-дің стандартты оқиғалар және әдістер. Визуалдік фильтрлер.

HTML-дің қызметті. HTML-дің қысқаша тарихы. HTML құжаттың құрылымы. HTML элементтері.

HTML-құжат – бұл кәдімгі мәтін файлы, сондықтан поэтому для создания WEB-бетін жасау үшін кәдімгі мәтін редакторы жеткілікті, мысалы БЛОКНОТ мәтін редакторы. Мәтін мен басқа объектілердің форматталуын басқару үшін терілетін мәтінге барлығының қай түрде болатынын анықтайтын, тегтер немесе дескрипторлар деп аталатын, арнайы кодтар енгізіледі. Мысалы, егер бетте қалың қаріп керек болса, онда бұл мәтін қалың қаріпке сәйкес тегтерге алынады.Мысал. <B> Салем </B>

Page 17: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

        <B> бірінші тегі браузерге пайдаланылатын мәтінді қалың қаріппен жазу керектігін хабарлайды. Бұл </B> кездеспегенше дейін жалғасады. Қиғаш сызық жабушы тегті белгілейді.        WEB-бетін HTML құжаттарының арнайы редакторлар көмегімен жасауға болады, бірақ WEB-беттерін жасаудың автоматтау құралдарының барлығы аяғында тегтері бар, HTML-құжаттарын жасайтынын ұмытпаған жөн. Одан басқа WEB-беттерін профессионалды жасау үшін сіз олардың ішкі құрылымын, яғни HTML кодтарын білуіңіз қажет.        HTML-файлдары әрқашан браузерге оның HTML-кодтары бар файлмен жұмыс істейтінін хабарлайтын  <HTML> тегінен басталады. HTML-файлының соңғы жолы әрқашан “соңы” дегенді білдіретін </HTML> тегінен тұрады. HTML құжаты: басы мен денесі деген екі бөліктен тұрады. Басын анықтау үшін бірден <HTML> тегінен кейін <HEAD> мен </HEAD> тегтері қолданылады. Денесін анықтау үшін бірден </HEAD> тегінен кейін <BODY> мен </BODY> тегтері орналастырылады.         Осылайша, бастапқы мәтіннің белгіленуі іске асатын HTML кодтары тегтер деп аталады. Тегтер (<) символымен басталып (>) символымен аяқталады. Бұл символдардың арасында тегті анықтайтын басты сөз орналасады. Тег атауындағы әріп регистрі мәнсіз. Көп жағдайларда қос: ашушы мен жабушы тегтер пайдаланылады. Ашушы тег  эффект әсерін жасаса, ал жабушы тег оны тоқтатады. Жабушы тегтерінде (/) символы болады.Мысалы, БЛОКНОТ редакторын ашып келесі мәтінді теріңіз.<HTML><HEAD></HEAD><BODY>Мұнда WEB-бетінің мәтіні орналастырылады</BODY></HTML>Файлды html немесе htm кеңейтілуімен сақтаңыз. Егер осы файлды іске қосса, Internet Explorer шолушысы ашылады да, ал онда сіз өзіңіздің HTML құжатыңызды көресіз. Оған қоса тегтер экранда көрсетілмейді.        Басында шолушы терезесінің басында көрсетілетін WEB-бетінің атауын енгізуге болады. Ол үшін <TITLE> мен </TITLE> қос тегтері пайдаланады..Мысалы.<HTML><HEAD><TITLE>Жай Web-бет</TITLE></HEAD><BODY>Мұнда WEB-бетінің мәтіні орналастырылады </BODY></HTML>

Page 18: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Бет денесінде орналасатын мәтіннің қалай жасалатынын қарастырайық. Біріншіден, егер кәдімгі мәтінде жаңа жолға көшу үшін Enter пернесін басуға болса, ал HTML-құжатында <BR> тегін қолдану керек, өйткені браузер Enter пернесін елемейді.       Екіншіден, HTML тілінде <!-- арнайы тегімен басталатын түсініктемелерді қолдануға болады. Бұл тегтен кейінгі мәтін экранда бейнеленбейді. Түсініктеме --> тегімен аяқталады. Онда (>) символдары мен басқа тегтер болмауы керек.       Ашушы тегтерде тегпен жасалатын эффектіге әсер ететін атрибуттар болуы мүмкін. Атрибуттар – бұл басты сөзден бос аралықтармен ажыратылған қосымша басты сөздер. Атрибуттар мәндері басты сөзден теңдік белгісімен ажыратылады. Атрибут мәні тырнақшаға алынады. Жабушы тегтердің атрибуттары болмайды. BODY тегінің бет фонының түсін беретін BGCOLOR атрибутының мысалы:<BODY BGCOLOR = “#0000FF”>Осылайша, қарапайым  WEB-бетінің құрылымы келесі:<HTML><HEAD><TITLE> Жай құжат </TITLE></HEAD><BODY>Бұл мәтінді экраннан оқуға болады<BR> Жаңа жол. <BR> Екінші жол.Жол жалғасы.</BODY></HTML>WEB-бетінің сыртқы түрі 1.1 суретінде көрсетілген. 

 WEB-бетінің сыртқы түрі Құжаттың негізгі функционалды бөлімдері тақырыптар мен абзацтар болып табылады.

Page 19: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

       HTML тілінде құжаттың ішкі тақырыптарының 6 деңгейі бар. Олар <H1> мен </H1> ден бастап <H6> мен </H6> дейінгі тегтермен белгіленеді. Экранда бұл тақырыптар жартылай қалың әр түрлі мәнді қаріптермен бейнеледі.       Абзацтерді белгілеу үшін <P> мен </P> тегтері пайдаланады. HTML тілінде бас жол жасау құралдары қарастырылмағандықтан браузер абзацтар арасында әдетте бос жол енгізеді.       Мәтінде ажыратудың маңызды құралы  <HR> тегімен жасалатын горизонталды сызық болып табылады.. Бұл жалғыз тег және оның жабушы тегі > жоқ. Сызық ұзындығын экран еніне байланысты Width атрибуты арқылы беруге болады.Мысалы. <HR Width =50%>Сызық тегістелуін сол жақ, центр, оң жақ бойынша Align атрибутының көмегімен беруге болады. Мысалы, Align=center.Сызық қалыңдығын беру үшін Size атрибуты қолданылады. Қалыңдық пиксельдермен беріледі.       Сөздер арасындағы барлық  "артық" бос аралықтар мен жаңа жолға  Enter пернесі арқылы көшулер HTML құжатында елемелінетінін еске сақтау керек. Абзац жасаусыз жаңа жолға көшу үшін  <BR> тегі қолданылады.       Сөз тіркесін қалың қаріппен ерекшелеу үшін <B> мен </B> тегтері қызмет етеді.       Курсивпен ерекшелеу үшін <I> мен </I> тегтері қызмет етеді.       Астын сызу үшін <U> мен </U> тегтері қызмет етеді.Астыңғы индекс жазу үшін <SUB> пен </SUB> тегтері қызмет етеді.

Үстіңгі индекс жазу үшін <SUP> пен </SUP> тегтері қызмет етеді.

Мысалы.Судың химиялық формуласы H<SUB>2</SUB>O.Экранда осылайша көрінеді: Судың химиялық формуласы Н2О.Мәтінге пернетақта өзінен тікелей енгізіле алмайтын символдар арнайы деп

аталады. Ондай символдар үшін ерекше тегтер бар.

       Төрт символдың - <, > белгілері, амперсанд & пен тырнақшалар “ HTML құжатында арнайы мәні бар, сондықтан олар мәтінде өзінің кәдімгі мәнінде қолданыла алмайды. Осы символдардың біреуін қолдану үшін келесі escape-тізбектерінің біреуін пайдалану керек:&it – кіші белгісі; &gt – үлкен белгісі; &amp – амперсанд; &quot  - тырнақша.

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

Page 20: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Құжатта гипермәтіндік сілтеме жасау өте оңай. Ол үшін <A> мен </A> тегтері пайдаланады. Оған қоса HREF атрибуты міндетті. Оның мәні URL мекен-жайы болып табылады. <A> мен </A> тегтерінің арасындағы сілтеме мәтіні  браузерде көрсетілгенде көк түсті және асты сызулы болып шығады. Сілтемені шерту берілген URL мекен-жайы бойынша айысуға әкеледі.Гиперсілтеме басқа WEB-бетті немесе WEB – түйініндегі кез келген басқа файлды көрсете алады.Егер WEB-бет басқа WEB-түйінінде орналасса, онда то в качестве атрибута HREF атрибуты ретінде құжаттың хаттама атын қоса толық URL мекен-жайы пайдалануы керек (Бұл сыртқы сілтеме).Мысалы: <A HREF="http://www.kstu.kz"> Қарағанды мемлекеттік техникалық университеті </A>.Экранда " Қарағанды мемлекеттік техникалық  университеті " сөз тіркесі асты сызылған болады.Егер сілтеме сол WEB-түйінінің басқа бетіне көрсетсе, онда қатыстық жолды жазу жеткілікті (Бұл ішкі сілтеме).Мысалы: <P> Менің бетіме өтейік <A HREF="my.htm"> Менің бетім </A>.Сілтемені шолушының басқа терезесінде ашу үшін <A> тегінде Target = Blank деп жазу керек.Сілтемеде беттің белгілі бір орнына көрсетуге болады. Ол үшін зәкірді алдын ала сол орынға орнату керек. Зәкірде HREF атрибутының орнына NAME атрибуты пайдаланады. Бұл атрибут мәні "зәкір атауы" болып табылады. Ол тек латын әріптері мен цифрлардан тұрып, бос аралықтары жоқ болуы қажет. Орнатылған зәкірге сілтеу үшін URL-де зәкір атауының алдына # символы қойылады.Мысалы. <A HREF="#address">  бет соңында </A>               ……………………………………………………               <A NAME="address"> Пошта мекен-жайы </A>.Сілтемені басқа құжаттың белгілі бөліктеріне жасауға болады. Ол үшін зәкірді орнатып, ал сілтемеде файл мен зәкір атауын көрсету керек. Мысалы:<A HREF = "stud.htm #lek2" > Лекция 2 </a>Гиперсілтеме түсін беру үшін BODY тегінде LINK, VLINK, ALINK атрибуттары қолданады.LINK атрибуты гиперсілтемелердің бастапқы түсін береді. Мысалы, <BODY LINK = “#0000FF”>VLINK атрибуты ашылған сілтемелер түсін береді. АLINK атрибуты задает жаңа ғана таңдалған, бірақ құжаттың экранда жаңалануына әкеліп үлгермеген сілтемелер түсін береді.

Page 21: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Динамикалық мүкіндіктерді жасау құрал-тәсілдері. DHTML-дің стандартты оқиғалар және әдістер. Визуалдік фильтрлер.

Динамикалық HTML (DHTML) – бұл программаланатын HTML. Оның арқасында бет динамикалық болады. DHTML негізгі мүмкіндіктері:         Web-бетінің объектілі-бағытталған ұсынылуы;        Тұтынушы әрекетіне жауап ретінде құжатта мәтін немесе сурет бейнеленуін көрсетпеу;        Мәтін немесе бейне анимациясы, әр түрлі элементтердің бір-біріне қатысты орналасу тереңдігін өзгерту және т.с.с.;        CSS каскадты стиль кестелері;        Нәтижелер есептелуі мен бейнеленуінің клиент ПК-нда іске асуы.ОБП-ға келетін болсақ, онда беттің кез-келген элементі (тақырып, бейне, тізім және т.с.с.) объект болып саналады. Әрбір объектіге атау мен қасиеттерді беруге болады. Объектілер қасиеттері мен әдістері сценарийлерде көрсетіледі. Бет элементтері белгілі бір оқиғалар нәтижесінде өзгеруі мүмкін, мысалы объектіге тышқан көрсеткішін апарғанда. Web-бет элементтерін программалау үшін, оның программаланатын элементтерін анықтау керек. Ол үшін элементтің ID атрибуті бар DIV, SPAN тегтері немесе жеке ID атрибуті (идентификатор) қолданылады. Мысалы, егер сіз бетте гиперсілтеме әрекетін (мысалы, тұтынушы оған тышқан көрсеткішін апарғанда мәтін түсінің өзгеруі) программалағыңыз келсе,  онда <A> тегінде ID атрибутін көрсетіңіз:<A ID=link1 HREF= www.kstu.kz> КарГТУ</A>Гиперсілтеме программаланатын объектіге айналады.Барлық объектілер сияқты ол сыртқы әрекеттерді танып, олардың өндеушілерін шақырады. Егер link1_onmouseover процедурасын жазатын болсақ, онда ол тышқан көрсеткішін сілтеме мәтініне апарғанда автоматты түрде шақырылады.

DHTML оқиғалары Visual Basic оқиғаларына ұқсас. Все имена событий DHTML оқиғалар атауларының барлығы on префиксінен басталып әрқашан астыңғы регистрінде жазылады.         DHTML оқиғаларының қысқа тізімі 5.1 кестесінде келтірілген. 

DHTML оқиғаларының тізімі 

Пернетақта оқиғаларыonkeydownonkeypressonkeyup

Пернені басуПернені басуПернені жіберу

Page 22: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Тышқан оқиғаларыonclickondblclickonmouseourtonmousemoveonmousedownonmouseuponmouseover

Элементті шерту Элементті екі рет шертуТышқан көрсеткішін элементтен алып тастауТышқан көрсеткішін орын ауыстыруТышқан батырмасын басуТышқан батырмасын жіберуТышқан көрсеткішінің жаңа элементке ауысуы

Ерекшелеу мен фокусты беру оқиғаларыonfocus onbluronselectstartonselectondragstart

Енгізілетін мәндерді қабылдай алатын элементке фокус бергенде іске асадыЭлементтің фокусты жоғалтқанда іске асады Бетте ерекшелеу басталғанда іске асады Бетте ерекшелеу аяқталғанда іске асады Ерекшеленген объектілерді сүйреу басында іске асады

Тақырып 3.2 HTML -де CSS қолдану технологиясыCSS тілі. CSS тілінің құрылымы және ережелері. Стильдердің Ішкі Кестелер. Стильдердің Ауқамды Кестелер. Стильдердің Байланыстырған Кестелер.

Каскадты стиль кестелері (CSS) HTML-құжатын форматтілеудің ең жақсы құралдарының бірі болып табылдады. CSS бүкіл Web-сайтының біртұтас безендірілуіне қол жетуге рұқсат береді. Ол бет мазмұнын оның форматтілеуінен айыруға мүмкіндік береді.CSS –бұл көлемді және күрделі технология, сондықтан біз тек негізгі жағдайларды қарастырамыз. CSS жайлы көптеген пайдалы ақпаратты Интернете табуға болады. CSS-ті Web-бетіне енгізу жаңа атрибуттарды енгізгендей оңай. HTML тілінің спецификациясы  HTML-құжаттары үшін не тікелей HTML-құжат ішінде, не сыртқы стиль кестесі арқылы стиль кестелерін бейнелеу ережелерін анықтайды. Стиль кестесін құжатқа енгізу үшін STYLE элементі пайдаланады. Style блогы script блогына ұқсас. VBScript сценарийлерін style блогінде және керісінше CSS ақпаратын script блогінде орналастыруға болмайды. Мысал қарастырайық.<HTML>  <HEAD>  <STYLE type="text/css">    H1 { color: blue }

Page 23: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

  </STYLE>  </HEAD>  <BODY>    <H1>Үй беті </H1>    <P> CSS демонстрациясы  </BODY></HTML>H1 тақырыбының мәтіні көк түспен бейнеленуі үшін біз келесі CSS-ережесін жаздық:  H1 { color: blue }CSS ережесі екі бөліктен селектор (H1) мен бейнеленуінен (color: blue) тұрады. Бейнелену де өз кезегінде екі бөліктен тұрады: қасиет (color) пен мән (blue). Максималды иілгіштік үшін бастапқы HTML- құжатының өзгеруінсіз модификацияланатын және бірнеше құжатпен пайдалана алатын сыртқы стиль кестелерін жасау ұсынылады. Сыртқы стиль кестесімен қосылу үшін LINK элементін пайдаланамыз. Мысалы.<HTML>  <HEAD><LINK rel="stylesheet" href="bach.css" type="text/css">  </HEAD>  <BODY>  </BODY></HTML>LINK элементі анықтайды:  Біріктіру түрін: "stylesheet".   "href" атрибуты арқылы стиль кестесінің орналасуын.   біріктірілетін стиль кесте түрін: "text/css". CSS қолданылуының тағы бір мысалын қарастырайық.<HTML>  <HEAD>  <STYLE type="text/css">    BODY { color: red }    H1 { color: blue }  </STYLE>  </HEAD>  <BODY>    <H1> Үй беті </H1>    <P> CSS демонстрациясы  </BODY></HTML>Стиль кестесі енді екі ережеден тұрады: біріншісі негізгі мәтін элементтерінің қызыл түспен бейнеленуін анықтаса, екіншісі Н1 тақырыбының көк түспен

Page 24: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

бейнеленуін береді. P элементі үшін түс мәні орнатылмағандықтан, ол ата-аналық элемент түсін, дәлірек негізгі мәтіннен мұраға алады. Тақырыптың асты сызылу мысалын қарастырайық. Ол үшін CSS атрибутын тақырып тегіне енгізейік.<H1 style=”text-decoration:underline”>text-decoration атрибуты оның underline мәнінен қос нүктемен ажыратылады. Тақырып түсін Color атрибутымен өзгертуге болады.<H1 style=”сolor:red”> CSS-тің тағы бірнеше атрибуттарын қарастырайық.<p>Это<span style=”font-weight:bold”> жартылай қалың </span> қаріп</p>Осылайша: Italic- курсивOverline- үстін сызуText-transform:uppercase- үстіңгі регистрText-transform:lowercase- астыңғы регистр CSS форматының span тегінде берілетініне назар аударыңыз. Бұл тегті  CSS –ті мәтін фрагментіне қолдану керек кезінде пайдаланған ыңғайлы. Span тегі контейнерлі тег болып табылады. Гиперсілтемені форматтау мысалын қарастырайық. CSS-ті бүкіл құжатқа қолдану үшін Style блогін пайдаланамыз.<head><style><!—a:hover{color:blue}--></style></head><body><h1 style=” text-decoration:underline”>Салем!</h1><a href=”http://www.map.com”>Бұл сілтеме</a></body></html> Бұл мысалда сілтемеге көрсеткішті апарғанда оның түсі көкке ауысады.Гиперсілтемелер үшін CSS бірнеше атрибуттары қолданылады.-a:hover – гиперсілтеме стилі тұтынушы оған көрсеткішті апарғанда өзгереді;-a:active - гиперсілтеме стилі тұтынушы оны тышқанның сол батырмасымен шерткенде өзгереді;-a: visited - гиперсілтеме стилі тұтынушы оны пайдаланғанда өзгереді;-a:link – тұтынушы әлі пайдаланбаған гиперсілтеме стилін анықтайды.

Page 25: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Мысалы.a:hover{color:blue; text-decoration:overline}Көк түске үстіңгі сызық қосылды.Гиперсілтеме мәтіні оған тышқан көрсеткішін апарғанда курсив болып, ал алып тастағанда қалыпты түрде болуын қалауыңыз мүмкін дейік. Келесі процедураны жазыңыз:Sub link1_onmouseover()link1_style.fontstyle= “Italic”End SubҚалыпты түрге қалпына келтіру үшін:Sub link1_onmouseout()link1_style.fontstyle= “Normal”End Sub<A> тегіне ID=link1 атрибутін қосуға ұмытпаңыз.Осылайша оңай мәтін абзацін де программаланатын объектіге айналдыруға болады. Ол үшін <P> тегіне ID атрибутін енгізу керек.<P ID=string1> Жай мәтін</P>Енді мәтін қасиеттерін өзгертуге болады. Мысалы:String1.style.color= “red”.Жоғарыда қолданылған мысалдарда Style атрибуті пайдаланған. Бірақ басқа программаланатын атрибуттар көп. Сіз <IMG> тегінде идентификатор жасадыңыз делік:         <IMG ID=image1 SRC= “sky.gif” >Келесі өңдеушілер тұтынушы бейнеге көрсеткішті апарғанда оны үлкейтеді. Бейне өлшемдері курсорды алып тастағанда қалпына келеді.Бейне бетке келесі тегпен енгізіледі:         Планетаны атаңыз <IMG SRC= “mars.gif” ID=image1 WIDTH=50>Оқиға өңдеушілерінің түрі:Sub image1_onmouseover()         image1.border=3         image1 width=image1.width*2End SubSub image1_onmouseout()         image1.border=0         image1 width=image1.width/2End Sub

Тақырып 3.3 XML тіліXML-құжатты құру негіздері. Тіл конструкциялар. Арнайы символдар. Құжаттардың құрылымын сыңау директивалар. DTD. Құрал-саймандары. DOM-ның объекттік моделі. Microsoft Internet Explorer-дегі XML.

Page 26: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

XML (Extensible Markup Language) – XML-құжаттар аталатын мәліметтердің объкт класын сипаттайтын белгілеу тілі. XML тілі белгілеу үшін өзінің ешкандай тэгтар болмайды, ол жай ғана олардың жасау ретін аңықтайды. Тэгтар жиынтығын ұлғайтуға болады.

XML-құжаттың сыртқы түріҚұжаттың құрылымы.Қарапайым XML-құжат келесі мысалдағы түрде болуы мүмкін:<?xml version="1.0"?><list_of_items><item id="1"><first/>Бірінші</item><item id="2">Екінші <sub_item>подпункт 1</sub_item></item><item id="3">Үшінші</item><item id="4"><last/>Соңғы</item></list_of_items>Бұл құжат кәдімгі HTML-беттке ұқсас. XML-де ашатын, жабатын және бос тэгтар бар (HTML-де бос тэг ұғымы бар, бірақ оған арнайы белгілеу қажет емес). Кез-келген XML-құжат <?xml?> нұсқасынаң басталу керек, оның ішінді тіл версияның номерін, кодтық беттің номері және басқа параметрлер аңықталуы мүмкін. XHTML — XML тілде негізделген гипермәтінді белгілеу тілі, HTML-дың ағымды стандарттарға жақын. XHTML-дің HTML-ден айырмашылығы – кодтың жазылуының қаталдығы. XHTML – жаңа тіл, ескі HTML тілді алмастырады. XHTML-кодтың дұрыс жазылуын тексеру үшін валидатор-программалар болады.Дұрыс XHTML-беттің минималды кодын келтіреміз: <?xml version="1.0" encoding="windows-1251"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"><head> <title> Аталуы </title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /></ head ><body> Құжаттың мазмұны</body></html>

Page 27: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Тақырып 3.4 Сценарий тілдері. JavaScript тіліJavaScript-тің қызметі және қолдануы, жалпы мәліметтер. JavaScript-ке байланысты объекттік моделінің ұғымы. Қасиеттері. Әдістер. Оқиға. HTML-бетте кодтың орналысуы. JavaScript-тің URL-схемасы. Оқиғаларды өндеушілер. Ауыспалар. SCRIPT контейнері. HTML-құжаттің ішінде кодты орналастыру.

JavaScript-тің қызметі және қолдануы, жалпы мәліметтер. JavaScript-ке байланысты объекттік моделінің ұғымы.

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

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

Page 28: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Екінші көзқараста гипермәтіндік желі элементарлы ақпараттық объектілер жиынында  гипремәтіндік байланыстар рөліндегі HTML  беттерінің өздерімен анықталады. Бұл шешім көрсетілетін беттерді дайын компоненттерден бірден құру тұрғысынан жемістірек. Беттерді генерациялауда Web-те

"кл иент—сервер" архитектурасымен байланысты дилемма пайда болады.

Беттерді клиент жағында да, сервер жағында да генерациялауға болады. Соңғысы сервер жағындағы орын ауыстыру механизмімен іске асады (Server Site Includes). Netscape компаниясы  1995 жылы JavaScript программалау тілін жасап, клиент жағында да беттерді басқару механизмін таратты. Осылайша, JavaScript - бұл клиент жағында Web гипремәтіндік беттерді қарау сценарийлерін басқару тілі. Дәлірек болсақ, JavaScript – бұл клиент жағындағы тек программалау тілі ғана емес. Liveware, JavaScript ата-анасы, Netscape сервер жағындағы ауыстыру құралы болып табылады. Бірақ, JavaScript атағын клиент жағында программалау шығарды. JavaScript негізгі идеясы    HTML атрибуттар мәндерін- HTML-беттерін көру кезіндегі контейнерлер мен көрсетілу ортасының қасиеттерін тұтынушының өзгерту мүмкіндігі. Осы шартта бет қайта іске қосылмайды.  Практикада бұл мысалға бет фонының түсін немесе құжатқа енгізілген суретті өзгерту, жаңа терезе ашу немесе ескерту беруде көрініс табады. “Тірі” гипертекстті қосымшаны құру мәні өте қарапайым. Браузер, HTML—кодының интерпретаторыретінде екі функция атқарады: визуалды және моделельдеуші. Визуалды әсер көзге түседі: браузер құжатты экран бетіне шығарады. Бірақ, мұнымен жұмыс аяқталмайды. Браузер компьютер жадында HTML—файлының әрбір тегіне жеке объект сәйкес келетін  құжаттың программалық моделін құрайды. Бұл сызбаға қараңыз:

Page 29: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Браузер құжаттың объектілік моделін (ол иерархиялы) құруды window объектісінен бастайды. Бұл объектіде құжат көрсетілген терезенің қасиеттері көрсетілген. Window объектісінің құрамына <HTML>…</HTML> контейнеріне сәйкес келетін document объектісі кіреді. Document объектісі құрамына (қалғандар арасында) алынған HTML-файлының барлық IMG тегтері жайында ақпараты бар images объект-массиві кіреді. Негізінен, бұл массивте бірінші сурет images[0], екіншісі – images[1], т.с.с. объекті ретінде айқындалады. Егер HTML-кодында тегтер суреттелуін ғана емес, олардың белгілі бір оқиға пайда болуына сәйкес объектілі моделіне әсерін қадағаласақ, экран бетіндегі құжат “тірі” болып көрінеді. Мысалы,  “сурет үстіндегі тышқан сілтемесі” оқиғасы болғанда images[0] объектісіндегі pic1.gif src қасиетін pic2.gif (яғни, бір суретті басқа бір суретке алмастырсақ) ауыстырсақ. Сонда біз Лондонның ғана емес, Париждің де ғажайып жерлерін көре аламыз:

Гипермәтінді тірілтетін программалық кодтар (оларды скрипт немесе сценарий деп атайды) арнайы программалау тілдерінде жазылады. HTML-мәтіндеріне кодтарын енгізуге болатын ең белгілі тіл — JavaScript. Бұл тіл динамикалы

Page 30: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

интерактивті қосымшаларды құру құралы болып қолданғандықтан, біз оны қарастыруға кірісеміз.

Оқиғаларды өндеушілер.Функцияны шақырған кезде біздің орнына  барлық жұмысты оқиғалар орындау керек. JavaScript  - оқиғаларды меңгеретін (even-driven) тіл. Яғни оның ішінде орындалатын барлығы оқиға нәтижесі болып табылады немесе қандай да бір оқиғаны шақырады. Браузер ішіндегі жаңа бетті ашу, курсорды жылжыту, тышқанды шерту – бұнын барлығы оқиға болып табылады. JavaSripr оқиғаларының кейбіреулерін қарастырайық:          onload;        onClick;        onMouseover;        onMouseout.Әрқайсысына қысқаша шолып өтейік. ОnLoad оқиғасыБұл оқиға бірденені тиегеннен кейін, мысалы, браузер терезесінде бетті ашқаннан кейін орындалады. Ол суреттерімен қоса барлық беттің тиелгенінен кейін ғана орындалды деп саналады.ОnLoad  оқиғасын функция бет ашылғаннан кейін бірден орындалу үшін сценарий ішінде қолдану өте ыңғайлы.   ОnClick оқиғасыБұл оқиға беттің белгілі бір жерінде тышқанмен шерткен кезде  орындалады. Кейінірек сіз беттің көптеген элементтері (гипермәтін, сурет, батырма және т.б.) onClick оқиғасын қабылдай алатынын білесіз. Оны тұтынушымен бірлесіп әрекет ететін сценарий құрғыңыз келгенде қолдануға болады. ОnMouseover оқиғасы Бұл оқиға onClick оқиғасына ұқсас болғанымен, тышқан шертуінен кейін емес, курсорды беттің белгілі элементіне жақындаған кезде орындалады. ОnMouseover оқиғасын кез-келген Web-бет объектімен (мәтінмен, суретпен, батырмамен, гипермәтінмен және т.б.) байланыстыруға болады. Сонымен қатар оны интерактивтілік деңгейін көтеру үшін қолдануға болады. ОnMouseout оқиғасы

Page 31: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Бұл оқиға onMouseover оқиғасы сияқты, бірақ тышқан объектіден алынған жағдайда ғана орындалады. ОnLoad оқиғасын қолдануОnLoad оқиғасын JavaScript функциясын шақыру үші қолданғанда, келесі оқиғаны өндеушіні (event handler)  Web-бетінің <body> тегіне орналастыру керек: <body onLoad=”Функция аты()”> Ескерту Оқиғаны өндеуші – бұл оқиға суреттелетін және пайда болу нәтижесінде кейбір әрекет орындалатын, мысалы, орындалуға JavaScript функциясы енгізілетін,  код фрагменті.Егер сіз файлды сақтап, браузер ішінде ашсаңыз, онда сіздің функцияңыз тышқанмен беттің кез-келген жерінде шерткеннен кейін орындалатынын көресіз. HTML-бетте кодтың орналысуы. JavaScript-тің URL-схемасы. Ауыспалар.

SCRIPT контейнері. Қасиеттері. Әдістер. Оқиға. HTML-құжаттің ішінде кодты орналастыру.

Объект - бұл JavaScript-тің кілтті, маңызды мәлімет типі. Кез-келген басқа мәлімет типінде wrapper объектілі "орама" бар. Бұл  кез-келген типті айнымалысының мәніне рұқсат алар алдында айнымалының объектіге конвертациясы өтіп, одан соң ғана мән үстіне амал қолданады. Object мәлімет типі объектілерді өзі-ақ анықтайды. Осы бөлімде біз негізгі үш мәселеде тоқтаймыз:         объект түсінігі        объект прототипі        Object объектінің әдістеріБіз осы барлық мәселелерге айқынырақ тоқталмаймыз, себебі браузер жағында программалаған кезде көптеген жағдайда JavaScript-тің кірістірілген құралдарын қолданады. Ал бұл құралдардың барлығы объект болып табылғандықтан, олардың не екенін түсінуіміз керек.

Объект түсінігі

Белгілілік үшін ең алдымен ықтиярлы, объекті тұтынушымен анықталған   мысалын қарастырып, кейін оның не екенін анықтайық:

Page 32: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

function Rectangle(a,b,c,d){this.x0 = a;this.y0 = b;this.x1 = c;this.y1 = d;this.area = new Function("return Math.abs(this.x0-this.x1)*Math.abs(this.y0-this.y1)");this.perimeter = new Function("return (Math.abs(this.x0-this.x1)+Math.abs(this.y0-this.y1))*2");}c = new Rectangle(0,0,100,100);document.write(c.area());

Орындалу нәтижесі:

10000

Бұл мысал функция конструкторын қолдану иллюстрациясы үшін "Функция" бөлімінде көрсетілген. Мұнда біз бұл мысалды жалпы контекстте қарастырамыз. Rectangle() функциясы – бұл тұтынушымен анықталатын Rectangle классының объектісінің конструкторы. Конструктор берілген класстың реалды объект құруға мүмкіндік береді. Себебі, функция –  бұлкейбір амалдардың сипаттамасынан артық емес. Бұл амалдар орындалу үшін функция меңгеруін беріп жіберу керек. Біздің мысалымызда бұл new операторы арқылы істелінеді. Ол функцияны шақыру арқылы реалды объект құрайды. Төрт айнымалы құрылады: x0,y0,x1,y1 – бұл Rectangle объектісінің қасиетері. Оларға тек берілген класс объектісінің контектінде ғана рұқсат алуға болады. Мысалы,:

up_left_x = c.x0;up_left_y = c.y0;

Қасиеттерден басқа біз конструктор ішінде Function() типті екі объектіні JavaScript тілінің area мен perimeter кірістірілген  конструкторларын қолданып анықтадық. Бұл берілген класс объектісінің әдістері. Бұл функцияларды Rectangle класс объектісінің контексінде ғана шақыруға болады:

sq = c.area();length = c.perimeter();

Page 33: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Сонымен, объект – бұл тек қана конструктор арқылы берілген класс объектісін құрып, оның контексін қолдану арқылы рұқсат алуға болатын қасиеттер мен әдістер жиынтығы.Іс жүзінде программистпен құрылған объектілермен жұмыс істеу кездейсоқ жағдай. Себебі, объект белгілі бетте анықталатын функция – конструктор арқылы құрылады, яғни бұл беттің ішінде құрылғанның барлығы басқа беттерге мұрагер болып қалады. Әдетте біз JavaScript-тің құрама объектілерімен жұмыс істейміз. Яғни, курсттың басқа бөлімдерінде көрсетілгеннің барлығы – бұл құрама объектілердің  қасиеттері мен әдістеріне жүгіну. Бұл мағынада prototype атты объектілер қасиеттері өте қызық. Прототип – бұл белгілі класс объектісі конструкторының басқа атауы. Мысалы, егер біз String класс объектісіне әдіс қосқымыз келсе:

String.prototype.out = new Function("a","a.write(this)");..."Салем, достар".out(document);

Салем, достар

String класс объектілеріне жаңа әдіс жариялау үшін біз Function конструкторын қолдандық. Аз ғана өзгешелік бар: жаңа әдістер мен қасиеттерге объект прототипы өзгертілгеннен кейін ғана пайда болған объектілер ғана ие бола алады. Барлық құрама объектілер JavaScript программа меңгеру алғанға дейін құрылады, бұл prototype қасиеттерінің қолдануын айтарлықтай шектейді.  Сонда да құрама JavaScript класс объектісіне қалайша әдіс қосуға болатынын көрсетейік. Мысал ретінде кірістірілген аталған Image бола алады. Мәселе URL суреттерін Link класс объектісінің URL сияқты талдау:

function prot(){a = this.src.split(':');protocol = a[0]+":";return protocol;}function host(){a = this.src.split(':');path = a[1].split('/');return path[2];}function pathname(){

Page 34: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

a = this.src.split(':');path = a[1].split('/');b = new Array();for(i=3;i c = b.join('/');return "/"+c;}Image.prototype.protocol = prot;Image.prototype.host = host;Image.prototype.pathname = pathname;...document.write("<img name=i1 src='../images/jsi/ziraf1s.gif'><br>");document.write(document.i1.src+"<br>");document.write(document.i1.protocol()+"<br>");document.write(document.i1.host()+"<br>");document.write(document.i1.pathname()+"<br>");

Мұндағы негізгі идея – конструкторды қолданудан бұрын қайтадан анықтау. HTML-parser JavaScript-интерпретаторын асқындырар алдында HTML-ді башайлап, кірістірілген объектілерді ертерек құрайды. Бұдан беттегі объектіні  JavaScript-код арқылы тудыру керек екендігі көруге болады. Бұл жағдайда  ең алдымен Image объектісінің қайтадан анықталуы, ал кейін бұл класстың кірістірілген объектісі құрылады. Explorer –мен жұмыс істегенде бәрі нашарлау. Егер жол объектісінде prototype қасиетіне ол ұрыспаса, Image үшін мұндай қасиет анықталмаған.  Программалау объектілері ретіндегі HTML-контейнерлері JavaScript-тің негізгі идеясы тұтынушымен HTML– контейнерлері атрибуттарының мәндері мен HTML–бетін көру процессінде орта көрсетілуінің қасиеттерін өзгерту мүмкіндігі. Бұл жағдайда қайтадан тиеу орындалады. Іс жүзінде бұл, мысалы, бет фонының түсін өзгерту, жаңа терезе ашу немесе ескертуді шығару.

Объектілер

Бұл идеяны іске асыру үшін құжаттың объектілі моделі ұсынылды. Модель мәні - әрбір HTML-контейнер - бұл үштікпен сипатталатын объект:         қасиеттер        әдістер        оқиғалар Қасиеттер, әдістер мен оқиғалар бірдей жиынтықты объектілер біртипті объектілер класына бірігеді. Кластар –  бұл мүмкін болатын объектілер

Page 35: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

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

Қасиеттер

Көптеген HTML– контейнерлерде атрибуттар бар. Мысалы якорь контейнерінде оны гипермәтінді сілтемеге айналдыратын href атрибуты бар:

<a href=kuku.htm>kuku</a>

егер <A ...>...</A> якорь контейнерін объект ретінде қарастырсақ, href атрибуты якорь объектісінің қасиетін береді. Программист атрибут мәнін, сәйкесінше объект қасиетін өзгерте алады:

document.links[0].href="kuku1.htm";

Барлық атрибуттардың мәндерін өзгертуге болмайды. Мысалы, графикалық суреттің ені мен биіктігі бет тиелу кезінде бірінші тиелген сурет бойынша анықталады. Қалған суреттердің барлығы, оның алдында масштабт алады . Microsoft Internet Explorer-де сурет өлшемін өзгерте алады. Суреттің жалпылығы үшін JavaScript –тегі объектілердің HTML– белгісінде аналогы жоқ қасиеттері бар. Мысалы, navigator объектісі немесе браузер терезесі деп аталатын және JavaScript-тің ең үлкен объектісі саналатын орындалу ортасы.

Әдістер

JavaScript терминологиясында объект әдісі функция қасиеттерінің өзгеруін анықтайды. Мысалы, құжат объектісімен open(), write(), close() қасиеттері байланысты. Бұл әдістер құжат мазмұнын өзгертуге және генерациялауға мүмкіндік береді:

function hello(){ id=window.open("","example","width=400,height=150");id.focus(); id.document.open();id.document.write("<h1>Hello JavaScript</h1>");id.document.write("<hr><form>");id.document.write("<input type=button value=’Терезені жабу' "); id.document.write("onClick='window.opener.focus();window.close();'>"); id.document.close();}

Page 36: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Бұл мысалда open() әдісі құжатқа жазу ағынын ашады , write() әдісі бұл жазуды жүзеге асырады, close() әдісі құжатқа жазу ағынын жабады. Барлығы, қарапайым файлға жазғандай болады. Егер терезеде статус өрісі (әдетте онда құжат енгізілу пайызы көрсетіледі) болса, онда  құжатқа жазудың жабылмаған ағынында құжат енгізген кездегідей жазуды жалғастыру тікбұрышы "секірмейді".  

Оқиғалар

Әдістер мен қасиеттерден басқа объектіде олармен бола алатын оқиғалар бар. JavaScript-тегі программалау мәні - бұл оқиғаларды өндеушілерді жазу. Мысалы, button (button - "батырма" типті INPUT контейнері) типті объектімен "Click" оқиғасы бола алады, яғни батырманы басуға болады. Ол үшін INPUT контейнерінің атрибуттары оқиғаны өндеу атрибуты Click –  onClick-пен  кеңейтілген. Бұл атрибуттың мәні ретінде оқиғаны өндеу программасы көрсетіледі. Мұны JavaScript тілінде HTML– құжатының авторы жазу керек:

<input type=button value="Don't click here" onClick="window.alert('We repeate again: DON\'T CLICK HERE');">

Оқиға өндеушілері бұл оқиғаға байланысты контейнерлерде көрсетіледі. Мысалы, BODY контейнері бүкіл құжаттың қасиетін анықтайды, сондықтан бұл контейнерде onLoad атрибуты барлық құжаттың енгізу аяқталуын оқиға өндеуші  көрсетіледі.

Object объектісінің әдістері

Object - бұл объект, сәйкесінше, онда амалдар болуы мүмкін. Сондай амалдардың үшеуін қарастырайық: toString(), valueOf() и assign(). toString() әдісі объектінің символ жолына ауыстырылуын жүзеге асырады. Ол JavaScript программаларының барлығында айқын емес қолданылады. Мысалы, сан немесе жол объектілерін шығару кезінде. Мына функцияларға toString() қолданылуы:

document.write(prot.toString()+"<br>");

Орындалу нәтижесі:function prot() { a = this.src.split(':'); protocol = a[0]+":"; return protocol; }

Мұнда біз прототип мысалындағы prot() функциясын қолданыламыз. Егер Image объектісін осылайша басып шығарсақ, онда келесі нәтижені аламыз:

сурет:[object]

Page 37: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Осылайша, toString() әдісі объект мазмұнының жол эквивалентін барлық жағдайларда қайтармайды. Ол тек қана оның типін қайтарады. Бұл жағдайда Ехplorer "Object" –ті, ал Navigator - "object Image"-ді жай ғана қайтарады. Сәйкесінше, valueOf() әдісі . Бұл әдіс объектінің мәнін алуға мүмкіндік береді. Көптеген жағдайларда toString() әдісіне сәйкес жұмыс істейді. Әсіресе, егер мәнді бетке шығару керек болса:

document.write(prot.valueOf()+"<br>");

Орындалу нәтижесі:function prot() { a = this.src.split(':'); protocol = a[0]+":"; return protocol; }

Көретініміздей нәтиже toString() әдісіндегідей.  Алдындағы екі әдістерден гөрі assign() әдісі объектінің қасиеттері мен әдістерін оқуға ғана емес, қайта тағайындауға мүмкіндік береді. Бұл әдіс объектіге белгілі мәнді беруде қолданылады:

object = value; <=> object.assign(value);

Мысалды қарастырайық:

c = new Image();c.src = "../images/jsi/rept1s.gif";b =new Image();b.src = "../images/jsi/rept1g.gif";Image.prototype.assign = new Function("a","this.src = a.src;");...<a href='javascript:window.document.main.document.i2.assign(c);void(0);'>Суретті бояу</a>

        Суретті бояу           Суретті түссіздендіру

 Бұл мысалда біз assign() әдісін JavaScript-кодының ішінде емес,  қарапайым HTML –белгісінде қолданамыз. Әдісті қолданар алдында біз оны өз функциямыз етіп қайта анықтадық. Explorer  қолданушысын бұл жерде біз оларды сәл алдағанымызды хабарландыруымыз керек, өйткені бұл жағдайда біз Image прототипін Explorer-ға қайта тағайындауымыз мүмкін емес.

Page 38: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Тақырып 3.5 PHP технологиясыPHP технологиясы. Сілтемелер. Өрнектер. PHP операциялары. PHP функцииялары.

PHP. 3.0 версияның PHP – HTML-ге кірістірілген, серверде орындалатын сценарийлерді жазу тілі. PHP3.0-дің ең маңызды мүмкіндіктердің бірі – мәліметтер қорымен интеграция деңгейі. PHP-ді 1994 ж. аяғында Расмус Ледорф (Rasmus Lerdorf) ойлап шығарды. 1997 ж. таман тілдің синтаксикалық анализаторы Зев Сураски (Zeev Suraski) мен Анди Гутманс(Andi Gutmans)-пен қайтадан жазылды, және ол 3.0 версияның PHP тілінң негізі болды. Қазір осы тіл көптеген сайттарда қолданылады және коммерциялық өнімдер ретінде таратылады.Тегтер:1. <?php echo("если вы хотите работать с документами XHTML или XML, делайте так\n"); ?>

2. <? echo ("это простейшая инструкция обработки SGML\n"); ?> <?= выражение ?> Это синоним для "<? echo выражение ?>" 3. <script language="php"> echo ("некоторые редакторы (например, FrontPage) не любят инструкции обработки"); </script>

4. <% echo ("Вы можете по выбору использовать теги в стиле ASP"); %> <%= $variable; # Это синоним для "<% echo . . ." %>

PHP операциялары. PHP функцииялары.

Технология CGI позволяет создавать серверные приложения любой сложности, без ограничения возможностей программ CGI. Однако данная технология обладает рядом недостатков.1. При получении данных от клиента приложению приходится производить сложный разбор строки параметров запроса. Задача усложняется, если в запросе присутствуют строки в национальной кодировке.2. Содержимое документа HTML формируется приложением CGI. При изменении дизайна приходится осуществлять перекомпиляцию приложения.3. Приложения CGI, использующие интерфейс прикладных программ (API) локальной операционной системы сервера, плохо переносимы.Одним из вариантов решения приведенных проблем является использование технологии PHP для динамического формирования документов HTML на стороне сервера. Технология PHP является технологией стороны сервера.

Page 39: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Аббревиатура PHP раскрывается рекурсивно: "PHP: Hypertext Preprocessor". Основными сферами применения данной технологии являются создание серверных приложений и интерфейсов к базам данных.Приложения PHP встраиваются в документы HTML в качестве сценариев, подобно сценариям JavaScript, однако, в отличие от JavaScript, сценарии PHP выполняются не пользовательским агентом, а специальной программой – проигрывателем сценариев PHP, которая является приложением CGI и запускается сервером. Пользовательский агент получает результат выполнения запрошенного им сценария и не видит кода самого сценария. Документ HTML, содержащий сценарий PHP, как правило, имеет специальное расширение, например, php3 или phtml. При получении запроса такого документа сервер выполняет следующие действия:1. Запрашивает локальную операционную систему о типе файла php3 или phtml.2. Получив ответ, что данный файл является сценарием и путь к программе, выполняющей подобные сценарии, запускает проигрыватель сценариев, указав запрошенное пользователем имя файла в качестве параметра запуска.3. Проигрыватель сценариев PHP анализирует содержимое документа, выполняя инструкции PHP и передавая остальное содержимое клиенту без изменений.На рис. 3 приведено взаимодействие различных компонентов при запросе клиентом сценариев PHP.Инструкции PHP внутри документа html располагаются внутри специальных скобок, состоящих из последовательностей символов "<?" и "?>" или "<?php" и "?>". Можно также для включения сценариев PHP использовать элемент SCRIPT с атрибутом language, имеющим значение "php". Текст, находящийся вне специальных скобок, и называемый статической частью документа,

Рис. 3. Технология PHP

Проигры-ватель

сценариев

PHP

Сервер Web

КлиентWeb

Сеть

PHP

Page 40: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

проигрывателем сценариев PHP не анализируется и передается клиенту без изменений. Фактически, статическая часть является шаблоном документа HTML.Синтаксис языка сценариев PHP похож на синтаксис языков программирования C, C++, Java. Сценарий PHP представляет собой оператор PHP или последовательность операторов PHP, разделенных символами ";".Основными объектами языка сценариев PHP являются переменные, выражения, операторы и функции.Переменные в PHP не имеют типа. Тип переменной определяется хранимым в данной переменной значением. Тип переменной динамически изменяется в зависимости от контекста. В PHP различаются следующие типы:целый - integer;действительный - double;строковый - string;массив - array;объект - object.Преобразование типов осуществляется неявно, например, при подстановке переменных в качестве параметров функций, или явно, при указании типа, к которому нужно преобразовать значение переменной, перед именем.Переменные различаются по именам. Имя переменной в PHP начинается с символа "$". Для определения переменной нужно присвоить ей значение при помощи операции присваивания. Способы создания нового значения переменной отличаются для различных типов.Переменной скалярного типа (integer, double, string) можно присвоить в качестве значения соответствующую константу.Массивы в PHP являются не набором переменных, а переменными некоторого определенного типа array. В языке сценариев PHP массивы ассоциативны. Это означает, что индексом массива может являться не только число, но и строка. Индекс ассоциативного массива называется ключом. Новый массив может быть создан либо при создании элемента массива, либо при помощи вызова array. Для создания нового элемента массива нужно при присваивании значения переменной после имени указать ключ в квадратных скобках. При этом имя переменной будет именем созданного массива, а значение в квадратных скобках – ключом для получения доступа к значению созданного элемента массива. В PHP массивы являются динамическими. При присваивании значения элементу массива проверяется, существует ли уже в массиве элемент с заданным ключом. Если существует, то его значение заменяется на новое. В противном случае создается новый элемент массива. Все элементы массива объединены в двусвязный список. В массиве имеется внутренний указатель текущего элемента. Имеется возможность просмотреть текущее значение указателя, а также переместить указатель на предыдущий или последующий элемент в списке, а также на начальный или конечный элементы списка. Таким образом,

Page 41: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

можно осуществить последовательный доступ к каждому элементу массива. Для элементов массива с целочисленными ключами ведется счетчик индексов. Значением счетчика является увеличенное на единицу максимальное в массиве значение целочисленного ключа (индекса). Если массив не содержит элементов с целочисленными ключами, то счетчик индексов имеет нулевое значение. Если при присваивании значения элементу массива не указывать ключа в квадратных скобках, то ключом для нового элемента будет значение счетчика индексов, который после создания нового элемента увеличится на единицу. Данная возможность позволяет добавлять в конец массива элементы с последовательными индексами.Для создания массива с несколькими начальными элементами используется ключевое слово array, после которого в круглых скобках перечисляются присваиваемые элементам массива значения. В качестве ключей элементов используется счетчик индексов. Такое назначение ключей по умолчанию можно изменить при помощи операции "=>". Данная операция применяется в следующем виде:ключ => значениеЕсли в списке значений array встречается подобная операция, то очередному элементу массива будет присвоен указанный ключ. Данная возможность используется для создания массивов со строковыми ключами, а также для пропуска значений целочисленных ключей (индексов).Объекты в PHP служат для поддержки объектного программирования. Для создания нового объекта используется вызов new.Переменным любого типа можно присваивать в качестве значения другие переменные, а также значения, возвращаемые функциями и методами объектов.В PHP можно создавать ссылки на переменные. Ссылка – это имя переменной, отличное от заданного при определении. Для создания ссылки нужно определить переменную, значением которой будет имя ссылки. Если теперь присвоить значение переменной, в которой хранится имя ссылки, указав перед именем переменной двойной символ "$$", то будет создана ссылка, к которой можно обращаться по имени как к обычной переменной. При одновременной работе со ссылками и массивами возникает неопределенность, связанная с приоритетами символов "$" и квадратных скобок. Для разрешения данной неопределенности можно использовать фигурные скобки как символы явного определения приоритетов.При выполнении сценария PHP интерпретатор определяет ряд переменных, связанных с параметрами сервера, протокола HTTP, самого интерпретатора, а также полученным запросом. Каждый орган управления формы, содержащийся в документе HTML, имеет атрибуты name и value. При разборе полученного от клиента запроса интерпретатор PHP создает переменные, именами которых являются значения атрибутов name, а значениями – значения атрибутов value

Page 42: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

соответствующих органов управления. Это упрощает разбор форм в сценариях PHP.Важным понятием языка интерпретатора PHP является понятие выражения. Выражение – это константа, переменная или составленная из них при помощи операций конструкция. Выражение может быть составной частью более сложного выражения. Каждое выражение имеет значение, которое называется значением выражения. Значением операции является ее результат. Тип значения выражения зависит от типов входящих в выражение переменных и констант, а также от операций.Помимо типов, которые могут иметь переменные, значения выражений могут быть булевого типа. Выражения булевого типа могут принимать только значения FALSE или TRUE. Значения булевого типа не могут быть присвоены переменным, но иногда подставляются в функции и операторы. При подстановке переменных вместо булевых выражений происходит преобразование типа переменной к булевому. Для целых чисел значение FALSE имеет только 0, для строк – строки "" и "0". Операции языка интерпретатора PHP приведены в табл. 10.Операции PHPЗнак ОперацияАрифметические+ Сложение– Вычитание* Умножение/ Деление% Остаток от деленияСтроковые. Конкатенация строкПрисваивание= Обычное присваивание+= Присваивание со сложением–= Присваивание с вычитанием*= Присваивание с умножением/= Присваивание с делением%= Присваивание с получением остатка.= Присваивание с конкатенациейПобитовые& Побитовое умножение (И)| Побитовое сложение (ИЛИ)~ Побитовое отрицание (НЕ)Окончание табл. 10Знак Операция

Page 43: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Логическиеand Логическое Иor Логическое ИЛИxor Логическое исключающее ИЛИ! Логическое отрицание&& Логическое И|| Логическое ИЛИСравнение== Равно!= Не равно< Меньше> Больше<= Меньше или равно (не больше)>= Больше или равно (не меньше)

PHP Операторлар Синтаксис Операторif (cond1) {...}elseif (cond2) {...}...else {...}

Ветвление

while (cond) {...} Цикл с предусловием (цикл ПОКА)do {...} while (cond) Цикл с постусловием (цикл ДО)for (init; cond; expr) {...} Цикл с предусловиемbreak Безусловный переход на конец

операторов while, do while, for и switch

continue Безусловный переход на следующий цикл

switch (var) { case val1: ... case val2: ... ... default: ...}

Выбор

function name(parameters) {...}

Определение функции

return val Возврат значения

Функция - это именованный набор выражений, выполняющих определённую задачу. Чаще всего функции используются для многократного выполнения

Page 44: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

одной и той же последовательность действий, но над разными исходными данными и в разных местах скрипта.

Функции бывают пользовательские и системные. Пользовательские функции (как следует из названия) программист пишет самостоятельно. Системные функции всегда доступны из любого места скрипта и объявлять их не надо.

Пользоваться функциями очень просто. Объявляется функция следующим образом:<?php function mySampleFunction($parameter1, $parameter2) { // набор выражений (тело функции) // return возвращаемое_значение }?>

Любая функция имеет имя, список параметров, тело функции и возвращаемые данные. Правила именования функций аналогичны правилам дя переменных. Параметры записываются в скобках через запятую, а если функции не требуются параметры - должны ставится пустные скобки "()". Любая функция должна возвращать какое-либо значение. Если в коде функции не встречается выражение return, то считается, что функция возвращает пустое значение. Немаловажный факт - в PHP тип возвращаемых данных заранее не определён. Поэтому одна функция может возвращать значения с различными типами данных в зависимости от входных параметров.<?php // Функция выводит сообщение пользователя с // соответствующим описанием в зависимости от // важности ($severity). // Возвращает пустое значение function showError($severity, $error) { switch($severity) { case 0: echo 'Сообщение: '; break; case 1: echo 'Предупреждение: '; break; case 2:

Page 45: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

echo 'Ошибка: '; break; case 3: echo 'Критическая ошибка: '; break; default: echo 'Неизвестно: '; break; } echo $error . "<br />\n"; }?>

Теперь в любом месте скрипта можно написать <?php showError(0, 'Функция работает');?>

и в браузер будет выведено Сообщение: Функция работает

Рассмотрим более интересный вариант применения - функцию преобразования данных. Например, у нас есть список, содержащий полные имена, фамилии и отчества сотрудников. Нам для составления отчёта надо преобразовать полное ФИО к формату фамилии с инициалами, т.е. преобразовать "Иванов Александр Владимирович" в "Иванов А.В.".

Функция для преобразования будет выглядеть так:<?php

/* $f - фамилия $i - имя $o - отчество */ function convertFIO($f, $i, $o) { if(!isset($f) || !isset($i) || !isset($o)) return false; // Присваиваем результату фамилию $result = $f; // добавляем первый символ имени и точку

Page 46: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

$result .= substr($i, 0, 1) . '.'; // добавляем первый символ отчества и точку $result .= substr($o, 0, 1) . '.'; // Позвращаем результат return $result; }

?>

а код для вызова функции будет выглядеть так:<?php

// считываем данные из файла $fulls = file('fullnames.txt'); $shorts = array();

// обрабатываем каждую строку исходного файла foreach ($fulls as $value) { // разделяем строку на фамили, имя, отчество list($f, $i, $o) = split(' ', $value);

// получаем сокращённую форму $fio = convertFIO($f, $i, $o) . "\n"; // если функция не вернула false // добавляем результат в выходной массив if($fio) $shorts []= $fio; }

// сохраняем полученные данные в файл file_put_contents('shortnames.txt', implode('', $sorts));

?>

При использовании функций необходимо помнить следующее: В теле функции используются копии параметров, поэтому все изменения переменных будут потеряны привыходе из функции. Мы уже рассматривали такой пример при изучении областей видимости переменных. Если параметр должен быть изменён в функции - необходимо передавать его по ссылке, т.е. в описании функции надо перед именем параметра добавить "&": function func($p1, &$p2) { }

Page 47: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

В старых версиях PHP функция должна была быть объявлена до первого использования, но в PHP версии 4.3 и выше порядок объявления и использования функции может быть любым.

Как видите, использование функций позволяет существенно сократить код и повысить его читаемость. Кроме того, использование функций значительно облегчает отладку и совершенствование кода, т.к. все нужные выражения находятся в одном месте и не надо лопатить весь скрипт в поисках нужных участков. Кроме того, умение пользоваться функциями очень пригодится при изучении работы с классами в одном из следующих уроков.

Тақырып 3.6 Web-қосымшалардағы графика. Flash технологиясыMacromedia flash бағдарламаның мүмкіндіктері. Flash-тың жұмыс ортасы. Кадр. Кілтті кадр. Графикамен және дыбыспен жұмыс. Қабаттармен жұмыс. Анимацияны жасау. Action script тілді қолдану. Action script құралдары арқылы қарапайым сценарийлерді құру. Flash-технологияны қолданып web-сайттардың элементтерін жасау. Flash-ті қолданып web-беттерді жасаудың негізгі бағыттары. Атаулар және бейнелер. Кірістегі бет басы. Санаушылар. Қонақ кітаптарі. Мәзір. Html-кодқа flash -элементтерді кірістіру.

Мультимедиялық Web-бет термині аудио мен видеоклиптерді пайдалануды білдіреді.

Аудиоклиптер- бұл дыбыс файлдары. Олар адамдарға ақпаратты тек көріп қана қоймай, оны естуге мүмкіндік береді. Аудиоклиптер сіз бетті қарағанша жеке ашылып ойнатылады.Дыбыс файлдарының әр түрлі жазба әдістерін ұсынатын әр түрлі форматтары бар. Мысалы, WAV, MIDI,  MP3.Internet-те аудиофайлдың кез келген түрін табуға болады.         http:// sunsite. unc. edu / pub / multimedia / sun – sounds / movies / - мұнда фильдердегі клиптер мен музыка бар.        http:// Web. msu. edu/ vincent/ index. html – Мұнда танымал адамдардың сөздері бар. 

Аудиоклипті web- бетіне енгізу. Ең қарапайым және танымал әдіс – бұл сілтеме тегін пайдалану.Осы шартта дыбыс файлын ойнататын мультимедиялық ойнатқыш қосылады. Мысалы.<A HREF=”BES.MID”>  Музыка тыңдайық</A>Басқа әдіс – < EMBED > тегін қолдану.Мысалы. < EMBED SRC = “ LION. WAV “>.

Page 48: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Клиптің басқару панелінің биіктігі мен енін беруге болады. Тұрақты Height = 60, Widht = 140.Егер AUTOSTART = TRUE параметрін орнатса, онда аудиоклип автоматты түрде қосылғаннан кейін бірден ойнай бастайды. Егер  AUTOSTART = False  тұтынушы басқару панеліндегі Play батырмасын басуы керек.Мысалы. <EMBED SRC = “LION. WAV” HEIGHT = 60 WIDTH =140 AUTOSTART = TRUE >Егер LOOP = TRUE параметрін орнатса, онда клип көп рет ойнатылады.Егер LOOP = FALSE, онда клип бір рет ойнатылады.Егер LOOP = 3, онда  клип үш рет ойнатылады.Егер HIDDEN = TRUE параметрін орнатса, онда панель көрсетілмейді.Дыбыс файлын <BGSOUND> тегімен енгізуге болады. Бұл жағдайда ойнатқыш экранда көрсетілмейді.Мысалы. <BGSOUND SRC = “ myaudio.wav “>.Ойнау санын LOOP параметрімен беруге болады. Мысалы, LOOP = 5.midi- файлдарын ойнату үшін  <BGSOUND SRC =” CANYON. MID”>Егер LOOP = -1, онда файл бет ашық тұрғанша дейін ойнай береді. 

Видеоклиптерді енгізу. Видеоклип – бұл қозғалатын суреттер пен дыбыстар үндестігі. Видеоклиптер олардың Web-беттерінде қолданылуын қиындататын өте үлкен ауқымды.2 мегабайтты файлды 28,8 бод жылдамдықта іске қосуға 10 – 20 минут кетеді.Видеоның негізгі үш форматы бар:AVI, QT, MPEG.Видеоклиптерді Web – бетіне енгізу үшін <A> тегін пайдалануға болады. Мысалы:< A HREF = “welcome. avi”> welcome to my home page </A>.AVI- файлдарын ойнату үшін <EMBED> тегін қолдануға болады. Мысалы <EMBED SRC = “Sport. AVI ”Height = 200 Widht = 300>AutoStart = yes параметрін клиптің автоқосылуы үшін береді.Егер LOOP =True, онда көп рет ойнатылады. Егер LOOP =False, онда бір рет ойнатылады. HIDDEN = TRUE параметрі ойнатқышты көрсетпейді.Видеоклипті DynSRC атрибуты бар <IMG> тегі арқылы енгізуге болады.Мысалы:<IMG SRC = “andy.gif” DynSRC = “andy. avi”>Алдымен Internet Explorer andy.gif графикалық файлын қосады.Одан кейін andy.avi видеофайлын қосып ойнатады. Видео и аудио файлдары әр түрлі форматтарды қолдана алады: әдеттегі мен ағындық. Әдеттегі форматтар файлдың ойнатылуы мүмкін болғанша дейін оның толық іске қосуын талап етеді. Ағындық форматтар дыбыс пен видеоны

Page 49: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

деректердің енгізілуі кезінде нақты уақытта ойнатуға рұқсат етеді. Мысалы, "Серебряный дождь" (www . silver . ru ) радиостанциясы осы форматта жұмыс істейді.

 Анимациялық сурет жасау

 Анимациялық суреттер Web-беттерін ажарлы етеді. Анимациядағы керемет нәтижелерге Macromedia Flash 5 программасымен жетуге болады. Бірақ ондай программаны зерттеп білуге жеке бос уақыт қажет. Көптеген дайын анимациялық суреттерді Интернеттен табуға болады.Бір дискетке сыйып, үйренуге көп уақыт керек етпейтін Animagic GIF программасын қарастырайық.Алдымен нәтиже файлы тұратын сурет-кадрларын жасау керек. Суреттерді кез келген графикалық редакторында жасап GIF кеңейтілуімен сақтау қажет. Animagic программа менюсының негізгі пункттерін қарастырайық.

Одним из основных отличий Macromedia Flash от всех остальных существующих ныне web-технологий является то, что это единственный стандарт, позволяющий работать не только с растровой графикой, но и с векторной. Помимо этого текст импортируется в среду Flash не как растровое изображение, а именно как текст, в котором один символ кодируется одним байтом информации, что является серьезным оружием в борьбе с излишним объемом результирующих файлов. Немаловажно, что во Flash имеется возможность воспроизведения музыки и звуков в формате МРЗ. В среду Flash интегрирован специальный язык программирования, немного похожий на Java, но более простой в изучении. Написанные с его помощью программные модули импортируются в документ как апплеты и вставляются в нужный кадр анимации, где должно произойти динамическое изменение изображения. С помощью специального редактора можно написать небольшую программку, управляющую проигрыванием клипа, создать элементы, поддающиеся индивидуальным настройкам посетителями сайта, генерировать заставку с несколькими вариантами продолжения. Способов реализации этой возможности существует множество, но все-таки, чтобы использовать всю мощь встроенного языка, необходимо иметь определенный опыт в программировании. Механизм технологии Macromedia Flash достаточно прост: в общем случае подготовленные разработчиком интерактивные элементы и анимация превращаются в интерпретируемый код, который импортируется в страницу HTML. Для того чтобы клиентский браузер мог распознать объекты Flash, необходимо проинсталлировать на компьютере пользователя специальную надстройку к браузеру (plug-in), которая носит название Macromedia Flash Player. Эта про- грамма распространяется бесплатно фирмой-разработчиком данной технологии. Пользовательский браузер, сталкиваясь с

Page 50: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

документом в формате Flash, как правило, сам связывается с соответствующим узлом, после чего начинает загрузку и установку Flash Player в автоматическом режиме. Проигрыватель Flash уже интегрирован в броузеры Microsoft Internet Explorer 4.0-5.0 иNetscape Navigator версии 4.01 и выше. Другие браузеры, к сожалению, не умеют распознавать данный стандарт, в чем и заключается его основной недостаток. Существует своего рода типовая физическая структура, которой более или менее строго придерживаются все Web-дизайнеры. Она представлена в следующем листинге. Имена папок отличаются от имен файлов тем, что первые не имеют расширения. В квадратных скобках дается необязательный текст.Корневая папка вашего сайта>default.htm{домашняя страница}download[s]programl.exeprogram2.zipsomefile.rarhtml[s]pagel.htmpage2. htmlmediafilml.avifilm2.swfbackgroundsound.midpic[s]picturel.gifpicture2.jpgВот такая структура. Как видите, файлы, в основном, организованы по типу: Web-страницы — в одной папке, графические файлы — в другой, муль-тимедийные — в третьей и т. д.Корневой называется папка, в которой помещается ваш сайт. В папке download[s] находятся файлы, не являющиеся ни Web-страницами, ни изображениями, ни мультимедийными данными. Это могут быть программы, файлы данных, архивные файлы и пр. Когда пользователь щелкает на гиперссылке, указывающей на такой файл, Web-обозреватель предлагает открыть его или сохранить на диске для последующего открытия. В любом случае, сам Web-обозреватель такие файлы не обрабатывает. В папке html[s] помещаются сами Web-страницы. В папке media находятся все мультимедийные файлы, используемые на страницах. Это фильмы в форматах AVI, Macromedia Flash и др., фоновая музыка в формате WAV, MIDI и т. п. В папке pic[s] располагаются все графические изображения.

Page 51: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

Қолданылатын әдебиеттер 1. Бидайбеков Е.Ы., Біләлов Ш., Григорьев С.Г. Ақпараттану атаулары:

ағылшынша-орысша-қазақша атаулар. – Алматы: Білім, 1998 –224 б.2. Ж.К. Нұрбекова, А.З. Даутова, Т.К. Койбагарова. Орысша-

қазақша түсіндірме сөздік. Павлодар, 2002, -44 б.3. Шиндер Д.Л. Основы компьютерных сетей.:Пер. с англ. – М.:Вильямс,

2003 – 651с.4. Крейнак Д., Хебрейкен Д. Интернет. Энциклопедия. – СПб.: Питер,

2000. – 555с.5. Максимов Н.В. Попов И.И. Компьютерные сети: Учеб.пособие. – М.:

Форум: Инфра – М,2003. – 336с.6. Матросов А.В. и др. HTML 4.0/Матросов А.В., Сергеев А.О., Чаунин

М.П. – СПб.:БХВ – Санкт-Петербург, 2000 – 272с.:ил.7. Кассем Н. Разработка бизнес-приложений с помощью Java 2/Николас

Кассем. – М.:Лори, 2003. – 284с.8. Вейтман В. Программирование для Web: Уч.Пособие – М.:Вильямс, 2000.

– 368с.9. Шварц Р., Кристиансен Т. Изучаем Perl/Пер с англ.С.М.Тимачева. –

Киев: BHV, 1999. – 319с.10.Маршал Б. XML в действии – М.:Триумф, 2002. – 365с.11.Библиотека программиста Java: Попурри:CD Прил. к кн.К.Джамса.

Библиотека программиста Java.12.Защита и хранение данных: Лучшие продукты для Java: CD.Прил. к

журналу «КомпьютерПресс» - 2000, №7.13.Программирование в среде Java: CD – M.: Delta-MM Corp, 2003.14.Программирование на Perl: CD. - M.: Delta – MM Corp, 2001.15.XML в действии: CD. Прил. к кн.Маршала Б. XML в действии.16.Программирование на VCL: CD. M.: Delta – MM Corp, 2002.17.Интернет и WWW: Более 250 программ. CD – 2000. Прил. к журналу

«КомпьютерПресс» - 2000, №218.Интернет-технологии:CD -2000. Прил. к журналу «КомпьютерПресс», -

2001, №6.19.Мир Интернет: CD.Прил. к журналу «КомпьютерПресс», - 2004, №2.20.Web-дизайн и программирование: CD. Прил. к журналу

«КомпьютерПресс», 1999, №5.Қосымша деректер:21. CD-диск “Интерентте программалау” пәнінің

электрондық қамтамасыздандырылуы/Электронное сопровождение дисциплины “Программирование в Интернет”

Page 52: Web-технологияныњ ±ѓымдарыpsu.kz/arm/upload/umk/82928.doc  · Web viewНеобходимо заранее подготовить документ так, чтобы

22. М.Mельников. JavaScript и объектная модель/cherry - design @ mail . ru Алексей Моховой. Visual Basic Script. Основы программирования// www.midi.ru

23. Джон Остераут. Сценарии: высокоуровневое программирование для XXI века/[email protected]

24. Сергей Верязов. Обзор технологии Active Server Pages (ASP) /http://www.ci.ru "Компьютер-Информ"17.09.2001

25. Информация о CSS на сайте http://www.w3c.org/style/.  26.Таблицы совместимости элементов CSS с различными браузерами по

адресу http :// style . webreview . com 27.Конференция по CGI RU.CGI.PERL


Recommended