УМКД

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

ҚАЗАҚСТАН РЕСПУБЛИКАСЫ БІЛІМ ЖӘНЕ ҒЫЛЫМ МИНИСТРЛІГІ
Семей қаласының шәкәрім атындағы семей мемлекеттік университеті

3 деңгейлі СМЖ құжаты
ПОӘК
ПОӘК 042-39. 1.ХХ/01- 2013
ПОӘК
<<Интернетте программалау>> пәні бойынша оқу-әдістемелік материалдар
Редакция №____от_____

5В011100 - <<Информатика>> мамандығына арналған

<<Интернетте программалау>>
ПӘНІНІҢ ОҚУ-ӘДІСТЕМЕЛІК КЕШЕНІ

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

Семей
2013

МАЗМҰНЫ

* Глоссарий
* Дәрістер
* Практикалық және зертханалық жұмыстар
* Студенттің өздік жұмысы
ГЛОССАРИЙ

1.1. Желі арендасы (англ. dedicated) - Сіздердің жобаларыңыздың тапсырмаларында сконфигурирленген, арендада физикалық желілер арасындағы қызмет .
1.2. Администратор домена - доменнің аты тіркелген түр.
1.3. Веб-сайт (веб-сервер, Web-сайт, Сайт; англ. Web site; Site) - Мағынасымен біріктірілген, сілтемелермен қосылған және бір веб-желіде орналасқан қайталанатын дизайнерлермен веб - беттердің жиынтығы.
1.4. Веб-страница (web-page) - Веб-сайтта Интернет желісінде орналасқан ақпараттан тұратын бет.
1.5. Домен (Domain) - Internet желісінің құрылымдық бірлігі.
1.6. Интернет (сеть интернет, internet) - TCP/IP протоколында |негізделген бір адрестік кеңістікте бір бірімен өзара байланысқан бүкіл әлемдік ақпарат желісі .
1.7. Протокол - мәліметтердің берілуінде функционалдық блогтардың мінезін анықтайтын стандарт .
1.8. Протокол Интернет - интернет үшін жасалған протоколдардың (стандарттардың) жинағы :
HTTP- өз компьютерлеріңіздің браузерінің көмегімен веб - сайтты қараған кезде, сілтемелермен жұмсайтын немесе іздеу кезінде осы протоколды қолданасыз.
SMTP,POP,IMAP - Бұл протоколдар электронды поштаны жіберу, кабылдау және карап шығу үшін арналған FTP - Интернетте файлдармен алмасу үшін арналған мәліметтерді жіберетін протокол (File Transfer Protocol).
1.9. Желінің орналасуы (колокейшн; англ. colocation) - тұрақты электрмен қоректендіру, үйлесімді температура сияқты, техниклық жабдықтарды функционерлеу шарттарын камтамассыз ету ,Интернет желісінде жоғары жылдамдығы бар телекоммуникациялық түйіндерде, сіздердің желі жабдықтарыңыздың орналастыру қызметі.
1.10. Интернет желі (Интернет-желі; анғл. Internet Server) - Желігеқосылған мықты сенімді компьютер, онда клиенттерге ортақ ресурстарға және осы ресурстарды басқарушыларға рұқсат беруді орындайтын программа.
1.11. Хостинг (веб-хостинг: анғл. hosting, web-hosting) - қолданушыға желінің кеңістігінің бір бөлігін арендаға беру және функционалдылықты, қауіпсіздікті пайдаланушыларға өзінің веб-сайтын құру мақсатында хакерлерден қорғауды қамтамассыз етілген программалық қамтамассыз етуді аредаға беру.
1.12. BBS - Хабарландырудың электронды тақтасы (Bulletin board system)
1.13. Bit - бит. Ақпараттың минималды бірлігі. Биттардың сәйкестігі әріппен , санмен, сигнал берумен, қайта қосылуды орындаумен немесе басқа функциялармен берілген.
1.14. BPS - бит/с. 1 секундта бит немесе <<бод>>. Мәліметтердің берілу жылдамдығының өлшемі. Мысалға модем әдетте 56000 BPS жылдамдықта жіберіледі.
1.15. Browser (броузер, браузер) - программалық қамтамассыз ету, желіде интерактивті іздеу , қарау, табу және мәліметтерді өңдеу үшін мүмкіндік беретін грнафикалық интерфейс . Мысал үшін мынандай программалар клтіріледі Netscape Navigator, Mozilla, Opera, MS Internet Explorer және т.б.
1.16. Cern - ЦЕРН. Европейлік лобараторияда түиінде функцияның бөлімдері бойынша World Wide Web - тің бірінші конференциясы өткізілген.Сондықтан оны World Wide Web - тің туған жері деп есептейді. Технологиямен және WWW стандартымен жұмыс World Wide Web (W3O, www.w3.org түйін) организациясына берілді. http://www.cern.ch/
1.17. Chat - чат. Бұл термин интерактивті конференциялар үшін арналған көптеген жүйелерді сипаттайды.Сондай жүйелерге мысал: IRC, ICQ, WebChat, prodigy.
1.18. CGI - Common Gateway Interface веб-сервермен қолданбалы программалардың сыртқы стандарттарының байланысы болып табылады 1.19. Communication Link - байланыс каналы.Екі соңғы пайдаланушылар байланысы үшін арналған программалық қамтамассыз ету және жабдықау.
1.20. Compression/Decompression - орама/түйінді шешу. Жіберу немесе сақтау үшін мәліметтерді қысуға мүмкіндік беретін сигналдарды кодтау/кодтан шығару әдісі.
1.21. Connection - байланыстыру. Белгіленген түйіндердің немесе комутация жасаушы тізбектердің арасындағы байланыс.
1.22. Cyberspace - киберкеңістік. Бірінші рет "Neuromancer" Вильям Гибсонның (William Gibson) жасанды интелекттің тікелей желі организациясы туралы романында қолданылған термин және компьютерлік коммуникцияның коллективті сферасына (коллективной сфере) жатады
1.23. Download - жүктеу. Мәліметтердің немесе программалардың бір құрылғыдан екінші құрылғыға жібереілуі.
1.24. FAQ - Frequently Asked Question. Көінесе жиі қойылатын сұрақтар мен оларға жауаптар ЧоВо термині қолданылады.
1.25. File Server - файлдық желі. Жойылған қолданушылар үшін фаелдарға кіруді қамтамассыз ететін компьютер.
1.26. Finger - берілген түйінде желіні қолданушылар туралы керекті мағлұматтарды тауып беретін протокол.
1.27. Flame - флейм. Форумда немесе чатта ережелердін бұзылыуымен эмомоционалды таластар (споры).
1.28. Gateway - шлюз. Желілерді біріктіретиін түйін. Интернетке қосылуды орнатқан кезде шлюздың адресын дұрыс көрсету керек.
1.29. GIF - графикалық формат (Graphics Interchange Format). Интернетте сонымен қатар веб-серверде фаелдардың бейнелері үшін арналған стандартты формат.
1.30. GUI - графикалық интерфейс (Graphical User Interface). Графикалық пайдаланушылық интерфейс.
1.31. Home - Үй беті. Сайттын бастапқы беті, әдетте сипатталатын мінездемелер туралы мағлұматтардан тұрады.
1.32. HTML (Hyper Text Markup Language). Веб-сайттар үшін жазылған беттердің "негізгі" тілі.
1.33. HTTP (hypertext transfer protocol). Қарап шығуға және жеке пайдаланушыларға Бас компьютермен немесе желімен құжаттарды жіберуге көмектесетін протокол
1.34. Hyperlink - сілтеме. Веб-сайтта әртүрлі беттер арасындағы байланыс.
1.35. Hypermedia - гиперорталық. Түйндерде сілтемелердің көмегімен біріктіретін ақпараттарды дискретті көрсету әдісі. Мәліметтер мәтіндік, графикалық, бейнежазбалық, үнтаспалық, мультипликациялық, фотосурет немесе құжатнаманың орындалуы түрде көрсетілуі мүмкін.
1.36. Hypertext - гипермәтін. Басқа беттерге сілтеме жасаудан тұратын мәтін, ауысулар орындалуы мүмкін ресурстары немесе серверлері.
1.37. JPEG, JPG - графикалық формат (Joint Photographic Experts Group) - сапасын жғалту мен көріністердің жинағы үшін пайдаланатын әйгілі әдіс. Көбінесе фотосуреттер үшін қолданылады.
1.38. Modem - модем (MODulator-DEModulator). Аналогтық жүйелердің комігімен сандық мәліметтерді орындайтын құрылғы. Мысалға, телефон линиялары арқылы.
1.39. Multimedia - мультимедиа. Бейнежазбалар мен үнтаспалардың қолдауымен, Компьютерлік жүйелер.
1.40. Page - страница. Веб-сайтта жариаланған құжат.
1.41. PHP - Ашық бастапқы кодпен кең қолданылатын жалпы тағайындалған тілі болып табылады. PHP Web- тің кіріспесін жасау және HTML- кодында қолданылуы ушін құрылған.
1.42. PPP (Point to Point Protocol). Әдетте модемді қолданумен, жойылған пайдаланушылар желісіне қосылу, үшін арналған протокол.
1.43. Site - сайт, түйін. HTTP протоколының көмегімен көру үшін ашық виртуальді немесе шынайы интернет желісі.
1.44. SSL (Secure Socket Layer) - интернет желілері және компьютермен колданушылар арасында берілетін ақпараттарды шифрлеу үшін қолданылатын протокол.
1.45. URL - Интернет адресі (Uniform Resource Locator) - Протокол, желі аты, файл каталогының жолы және файлдың аты көрсетілетін Интернет бетінің адресінің жазба түрі. Мысалы ушін: http://www.plusweb.ru/index.shtml
1.46. VRML - үш өлшемді графиктермен интерактивті кеңістікті ауысуда үшін Web бетін форматтауға арналған вертуальді шынайы модельденген тіл (Virtual Reality Modeling Language).
1.47. Webmaster - Web-мастер. Веб - сервердің жүйелік администраторы, кейде Веб-мастер деп Веб-сайтта қызмет ететін дизайнерді немесе програмисті айтады.
1.48. WWW (World Wide Web)- Бір құжаттан екінші құжатқа жылдам ауысу үшін жүйелік сілтемелерден тұратын мәтіндік , графикалық және ақпарат мультимедиясын қарастыруға арналған Internet қызметі.

ДӘРІСТЕРДІҢ ҚЫСҚАША КОНСПЕКТІСІ
1-ДӘРІС. Web-дизайн және браузер

Дәріс мазмұны:
* Браузер ұғымы;
* web-бет дайындау;
* Web-сайтты өңдеу.
Internet желісінде адасып қалмау үшін шолғыш - браузер деп аталатын арнайы бағдарлама қажет.
Браузер - бұл веб-бетінің мәліметтерін Сіздің компьютеріңіздің бейне бетіне шығаруды қамтамасыз ететін, Internet қор көздерін қарауға арналған бағдарлама. Windows амалдық жүйесінің құрамына Internet Explorer браузері кіреді. Internet Explorer қазақ тілді нұсқасы Web-беттерді әзірлеушілер жасайтын ақпаратты дыбыстық және бейне сүйемелдеу сияқты түрлі мүмкіндіктерді қолдайды. Microsoft Internet Explorer-мен жұмысты бастау үшін жұмыс үстелінен шолғыш белгішесін тауып, оны нұқыңыз. Өзіндік бе ашылады. Пайдаланушы өзіне ұнаған веб-бетін өзіндік бет ретінде орната алады (11.11-сурет) .
Жоғарғы жақта ашылатын мәзірі бар үстел орналасқан (1). Одан сәл төменіректе навигациялық және басқа да батырмалары бар құралдар үстелі (2). Одан кейін - Өту батырмасы бар мекенжай жолағы (веб-бетінің URL-ін енгізуге арналған орын) және сілтемелер үстелі орналасқан (3).
Интернетте қызықты сайттар жиі кездеседі. Олардың мекенжайын Таңдаулы үстелінің көмегімен есте сақтап қалуға болады. Бұл үшін сәйкесінше Таңдаулы батырмасын шерту арқылы үстелді іске қосамыз да, соңғы сайтты таңдаулылар тізіміне Үстеу батырмасын шерту арқылы қосамыз (11.13-сурет).
Журнал - сіздің Internet-те жасаған саяхатыңыздың барысын қарап шығуға мүмкіндік беретін жүйе. Internet Explorer Сіздің Internet-те жасаған әрбір қадамыңызды өз бетімен тіркеп отырады. Сіз кіріп-шыққан әрбір веб-торапқа деген сілтемелері бар бұл жазбалар Журнал қалтасында сақталып тұрады. Ол қалтаны шақырудың ең оңай тәсілі - шолғыштың жоғарғы үстеліндегі Журнал батырмасын басу. Internet Explorer бағдарламасының Өзіндік батырмасы Сіздің өзіндік бетіңізге өтуге мүмкіндік береді. Ашылған бетті Internet Explorer-де сақтау үшін Файл мәзірінің Басқаша сақтау әмірін орындап, ашылған сұхбат терезесінде сақтау үшін қалтаны көрсетіп, қажет болса, файлға атау беріңіз де, Сақтау батырмасын басыңыз. Беттегі ұнаған суретті сақтау үшін, сол суретті тінтуірдің оң жақ батырмасын шерту арқылы бөлектеп алып, мәтінмәндік мәзірден Суретті басқаша сақтау тармағын шерту керек. Содан кейін сақтайтын қалтаны көрсету керек.
WWW негізгі элементі web-бет - бұл әртүрлі арнайы маркерлі тегті текст, ол материалдың сыртқы түрі мен олардың басқа беттермен байналысын қамтамассыз етеді. Барлық web-беттер арнайы HTML - тілінде жазылады. Қазіргі кезде WWW технологиясы пайдаланушыға web-беттерді мүмкіндік береді.
Мәтінге қосымша графиктер, дыбыстар, анимациялар және басқада арнайы эффектілер орнатуға болады. Жеке беттер басқа беттермен қосымша ақпарат алуға қамтамассыз ете отырып байланысады. Бұл ақпараттар физикалық тасымалдайтын, интернеттен оның протоколының көмегімен беріледі.
Web-беттің жинақтылығы және олардың гиперсілтеме арқылы байланысуы web-түйіндер немесе web-сайттар деп аталады. Web-сайттар web-сервердің белгілі бір бумасында орналасады. Web-сервердің кең таралған екі типі бар: Unix (немесе Linex) платформасында - қарапайым Apache сервері, Windows NT немесе Windows 2000 платформасында - US сервер (Internet Information Server). Гипермәтіндік материалдардың серверде орналасуы Web - публикация деп аталады.
Web-сайт бастапқы беттен тұрады - ол сайтқа кірерде web-браузерді ашады: мысалы, http://vrn.fio.ru адресі бойынша lndex.html (Unix) немесе default.html (windows) бетін жүктеу керек болса. Web-беттерді көру кезінде арнайы мамандандырылған құралдар қолданылады, олар Web-браузерлер деп аталады.
WWW маңызды ерекшелігі болып оның үлкен қарқынмен өсуі табылады. Кез келген мыңдаған адамдар мен мыңдаған компаниялардың өз сайттары бар. Әр адам өз визиткалық карточкаларында электрондық почтаның адресі көрсетіледі.
Web-сайтты өңдеу процесі.
Қазіргі кезде Интернетке кірсеңіз, көптеген дайын сайттарды табуға болады, олар тез жүктеледі, олардың шектелген бөлімдерінде өз ақпараттары және новигациялық ыңғайлы функциялары бар.
Ақпартаттық ағынның жоспарлануы.
Көптеген Web-мастерлер ақпартаттық ағынды құруға уақыт бөлмейді, бетте мәтінді және бейнелерді орналастыруды ұйымдастырады. Бірақта көптеген сайттарда
Өз сайтыңызды қызықты болсын десеңіз, ақпараттар ағынын визуациялап, пайдаланушының таңдаған жолын білуіңіз қажет.
Қалай жақсы сайт құруға болады?
Ең жақсы web - сайт - ол көрнекті, негізгі ойды көрсететін және пайдаланушыны ақпарат алуда көп күтуді талап ететін болуы керек. Ондай сайт құру үшін қажетті кеңестер:
өз сайтыңыздың атауын анықтап беріңіз. Сайттың мақсаты мүмкін болғанша нақты болуы керек. Өз компанияның өнімдерін, сайтта беріңіз келді делік. Бұл жақсы бірақ сіз ол өнімдерді қалай жарнамалайтыныңызды ойлану керек. Оның ең дұрысы - мақсаттың нақты болуы.
Міндетті түрде өз аудиторияныз туралы ойланыңыз. Кімдер сіздің сайттың негізгі (немесе қосымша) қолданушысы болады? Олар қандай жас шамасында? Немен айналысады? Сіздің сайтыңызда қанша уақытын өткізді?
Тез жүктелетін әлемді қолданыңыз. Адамдардың сайттан тез шығуының негізгі себебі - ақпараттың ұзақ жүктелуі болып табылады. Графикалық файлдардың үлкен көлемдісі сайтта қалу stop батырмасын басып, жүктеуді тоқтатады.
Өз сайтыныңды визуалды түрде қызықты қылып құрыңыз. Сіз интернеттен қызықсыз сайттарды кездестірген шығарсыз. Оларды неге қызықсыз қылады? Мүмкін түспен мәтіннің біртүстілігі, тақырып шығар. Барлық мәліметтерді бір бетке орналастыруға тырыспаңыз. өз бетіңізді көп ақпаратпен толтырмаңыз. Сіздің бетіңізді оқитындарды ойлаңыз. Бос кеңістікті сайттың бетін қосуға тырысыңыз. Бетте графикаларды орналастыруда, оның не үшін тұрғанын біліңіз. өз мақсатыңыз үшін бе, әлде жай сәндік үшін бе? Кез келген web - сайт жақсы көрінуі және маңызды ақпараттармен толтырылып, көруге ыңғайлы болуы керек. Мазмұнын дұрыс ұйымдастырыңыз. Егер сіздің пайдаланушының көруі қажет деген ақпараттар бар болса, онда оны сайттың түкпіріне жасырмаңыз. Ондай ақпараттарды жеңіл көруге болатындай етіңіз. Бірақ, сайттың бір деңгейде болмауын қадағалаңыз.
Өзін тексеруге арналған сұрақтар:
1. Браузер деген не?
2. HTML тілі. Таңбалар, тегтер, элементтер, атрибуттар.

Ұсынылатын әдебиеттер:
1. Веб-дизайн/Дмитрий Кирсанов - СПб: Символ-Плюс, 2004-376 стр.
2. HTML 4.0 в подлиннике/Матросов, Сергеев, Чаунин - СПб: BHV, 2000 - 672 стр.

*
* 2-ДӘРІС. HTML гипермәтіндік беттерінің тілдік жіктері
*
Барлық НТМL тегтернің тағайындалуы мен әрекеттесу орталарын келесі негізгі түрлерге бөліп көрсетуге болады;
* Құжаттың құрлымын анықтайтындар;
* Гипермәтін блоктарын өңдеу (параграфтар, тізімдер, кестелер, суреттер);
* Гипермәтіндік сілтемелер немесе закладки;
* Диалог ұйымдарыүшін формалар;
* Программаны шақыру.
Гипермәтіндік желінің құрлымы гипермәтіндік сілтемелермен беріледі. Гипермәтіндік сілтеме - бұл сілтемесі анықталған тематикалық, логикалық немесе құжатпен қандайда бір басқа тәсілмен байланысқан HTML құжатының басқа адресі немесе Internet - тің ақпараттық ресурсы.
WWW жүйесінде гипермәтіндік сілтемелерді жазу үшін, Universe Resource Locator.деп аталатын арнайы форма өңделіп шығарылған. Бұл өңделген форманы қолдануды келесі мысалда көруге болады:
Бұл мәтін

Гипермәтіндік сілтеме - дан тұрады.
Жоғарыда көрсетілген мысалда HTML - де якарь (anchor) деп аталатын "A" тегін URL формасында бұл сілтемені жазу үшін, гипермәтіндік сілтемені (Hypertext Reference) білдіретін "HREF" атрибутын қолданады. Берілген сілтеме "polyn.net.kiae.su" желіде "http" протоколымен жүзеге асырылатын рұқсат "altai" директориясында "index.html" атпен жазылған құжатты көрсетеді.
HTML - гипермәтіндік сілтеме екі класқа болінеді: жалпы және контексті гиперметіндік сілтеме. Жалпы сілтемелер толықтай барлық құжаттармен байланысқан және құжатың кез келген фрагментің көру кезінде қолдану мүмкін уақытта, жоғардағы мысалда корсетілгендей, контекісті сілтемелер құжат денесінде вмантированый. Стандартты тілде, оның пайда болған кезінен бастап екі класс сілтемелері бар, бірақ алғашқы кезден бастап әйгілілік контекістік сілтемелерді қолданған. Бұл әйгілілік пайдалану механизімі жалпы сілтемелерді түгелдей "атрофирлеуге" әкеп соқты.
HTML-құжатының құрлымы бірін-біріне қойған контейнерлерді қолдануға мүмкіндік береді. Құжаттың өзі - бұл тегінен басталатын және тегімен аяқталатын үлкен бір контейнер:
құжаттың мазмұны
HTML контейнері немесе гипермәтіндік құжат екі қойылған контейнерден тұрады: құжаттың тақырыбы (HEAD) құжаттың денесі (BODY):
Класикалық құжаттың қарапаймы түрін қарастырайық:
Netscape Communication компаниясы фрейм оргонизациясының мүмкіншілігімен құжаттың класикалық формасын кеңейтті, онда жұмыс терезесін бірнеше бағынышсыз фреймдерге болуге болады. Әр фреймда өзінің HTML беті жазылған.

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

3 - ДӘРІС. HTML-құжатының контейнері.

Дәріс мазмұны:
* Құжат бетінің тегі
* Белгілеуді басқару тегі
* Символдарды бейнелеуді басқару тегі
* Бейнелеу формасын басқару тегі
* Табуляция
* Тізім
* Гипермәтіндік сілтеме

HTML-құжатының контейнері.
Әрбір құжаттың құрама бөліктерінде оның ішінде қолданылатын өзінің контейнер жинағы болады. Құжат денесінің контейнерлері тақырыпта немесе FRAMSET контейнерінде қолданылмайды. Контейнерлердің әрбір тобын толықтай қарастырайық.
HTML-HEAD құжатының тақырыбының контейнерлері
Құжат тақырыбы атрибут қажет етпейді. Тақырып тегінің басты тағайындалуы - бұа барлық құжаттардың бейнелеу параметрлерін түгелдей сипаттау. Бұндай параметрлерге құжаттарды бейнелеу стилін, гипермәтіндік сілтеменің жалпы базалық адресін, жалпы гипермәтіндік сілтеме, идентификатор және құжат атын және т.б. жатқызуға болады. Біз тек қана жиі кездесетін контейнерлерді қарастырамыз.
TITLE
Такырып тегінде жиі қолданылатын құжат аты болып табылады.
TITLE келесі синтаксисті алады
Құжат аты
TITLE тегінің мазмұны құжат атының алаңында бейнеленеді.
BASE
BASE тегі URL формасында гипермәтіндік сілтеме көрсету формасымен байланысты. URL спецификациясы құжат адресатының екі формасын анықтайды: толық және толық емес. HTML URL адресінің толықтай формасын қолдануға рұқсат етеді. Сонымен спецификацияның екінші формасын қолдану үшін, оны бірдемемен негіздеу керек, базалық адресті сурау толық еместен URL-дің толық формасын қалыптастыруда қолдануға болады. BASE тегі осы базаны анықтауға мүмкіндік береді.
ISINDEX
HTML-құжатын кілттік сөз бойынша іздеу мүмкіндігі құжат тақырыбының ISINDEX тегі арқылы анықталады. Тілдің алғашқы версиясында берілген тег қосымша атрибут қабылдамады. Егер сервер кілттік сөз бойынша сұраныс жасайтын болса, онда ол автоматты түрде тақырыпқа ISINDEX тегін қояды. Кілттік сөз тізімін клиент құжат адресіне "?" символдан кейін жазады. Түсінікті, сұранысты сервер атқарады, "?" символдар түгел болған кезде іздеу машинасына айналды. HTML-құжаты "жазғы" программасымен, сонда кілттік сөз "?"-кейін осы программаның адресіне жазылады. Тілдің алғашқы версиясында өңдеу программасын көрсету және "SEARCH ISINDEX" стандартының орнына сөйлемді сұрау мүмкіндігі туды.

Көрсетілген мысалда HREF атрибуты сұранысты өңдеу программасының адресін анықтайды, ал атрибут PROMPT - шақыру мазмұнын анықтайды.
META
META тегі HTML спецификациясында жоқ құжат тақырыбының конструкциясын анықтау үшін қажет. Ол үш атрибут қабылдайды: NAME, CONTENT, HTTP-EQUIV. Берілген текті қолдану қиындығы, осы тег арқылы еңгізілетін конструкцияны интерпретациялау үшін, сервис немесе интерфейс қолданушылар осы конструкцияны кеңейтуі және қолдануы керек. Осындай жұмыс түрі үшін программа SGML конструкциясын түсіндіріп беру(интерпретировать) керек. Берілген тегті тәжірибеде қолданудың бірден-бір түрі тақырыпқа анықталған HTTP-EQUIV атрибуты арқылы протокол бойынша HTTP ақпаратын қосу.
< META HTTP-EQUIV="Keywords"
CONTENT="Plasma, Nuclear Physics">
Осындай қолдану кезінде почтаны жіберуге ыңғайлы болу үшін, HTTP-пакет тақырыбында мынадай жолдар қосылады: Keywords: Plasma, Nuclear Physics.
Құжат денесінің тегі.
Құжат денесінің тегі интерфейстік қолданушы программасында ақпаратты көрсетуді басқарады. Олар мәтінде тізілген контекстік гипермәтіндік сілтеме көмегімен деректер базасының гипермәтіндік құрылымын бейнелейді. Құжат денесі тұрады:
-иерархиялық контейнер және заставка;
-тақырыптар (Н1-Р6 дейін);
-блоктар(параграфтар, тізімдер, формалар, кестелер, суреттер және т.б.);
-көлденеңінен белгілеп алу және адрестер;
-мәтіндер, стильдерді жүргізу облыстарына бөлінген(сызылған, белгіленген, курсивті);
-математикалық бейнелеу, графиктер және гипермәтіндік сілтеме;
BODY
Құжат денесінің тегін бейнелеу BODY тегі арқылы бастап жазылады. HEAD тегінен айырмашылығы, BODY тегі атрибут қабылдайды:
ID-тег идентификаторы. Тегті атау үшін, сол сияқты гипермәтіндік сілтеме бойынша нүктелік ауысу түрінде қолданылады. Берілген атрибут құжат бетінің барлық тегінде бар.
LANG-екісандық ISO-639 код түрінде құжат тілін анықтайды, нүктеден кейін міндетті емес ISO-3166 форматында қала коды алынады. Тіл стандартын құраушылардың ниеті бойынша берілген атрибут түсіндіру программасын тану және көптілді мәтінді бейнелеуді басқару керек. Сонымен қатар Arena да, арнайы HTML 3.0 иллюстрациялау үшін арналған, ол осы мүмкіндікті іске асырмайды.
CLASS-"ADDITION.FIRST" типті иерархиялық құрылған ат. Мәтін тегін, анықталған бейнелеу стилімен байланыстыруға арналған. Қазіргі кезде қолданылмайды.
Жоғарыда көрсетілген үш атрибут дене тегіне жалпы болып табылады және алдағы уақытта оларды қарастырмаймыз. Егер атрибут құжат мәтіннің дене тегінде кеңейтілмесе, онда ол арнайы көрсетіледі.
BACKGROUND-құжат мәтінін бейнелейтін фонды анықтайды, мысалы, HTML-құжатында фон ретінде үлкен емес графикалық кескін "bgr.gif" қолданылады.
< BODY BACKGROUND ="bgr.gif">
Осы мысалда көрсетілгендей, берілген атрибуттың мәні ретінде URL формасында қысқартылған адрес қолданылады. Бұл локальдық файл адресі.
Белгілеу тегін басқару.
Тақырыптар.
Тақырыптар құжаттың бастапқы бөлімін қарастырады. Стандартта тақырыптың алты деңгейі анықталған: Н1-ден Н6-ға дейін. Мәтін, <Н1> тегімен қоршалған, үлкен көлемде болады-бұл басты тақырып. Егер мәтін <Н2> тегімен қоршалса, онда ол бірнеше есе кішірек көрінеді; ішкі мәтін <Н3> одан да кішірек және ары қарай <Н6> дейін. Кейбір программалар тақырыптың көп санын қолдануға мүмкіндік береді, бірақ та үш деңгейден көбі сирек кездеседі, ал бестен көбі тіпті сирек кездеседі.
ALIGN атрибуты.
ALIGN атрибуты мәтінді сол жақ шетке, оң жақ шетке, ортаға және ені бойынша теңестіруге арналған. Үнсіздік бойынша мәтін сол жақ шетке қарай теңестіріледі. Берілген атрибутты сол сияқты кестеге және графикке қолданамыз.

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

Мән
Қолданылуын сипаттау
Left
Right
Justify
Center
Сол жақ шетке теңестіру
Оң жақ шетке теңестіру
Сол және оң жақ шетке теңестіру
Ені бойынша теңестіру
Justify мәні интерпрпетацияның барлық программаларында іске асырылмаған.
Айналдыру (оборачивание)
ALIGN атрибутының көмегімен сіз мәтінді графикалық объектінің айналасында <орап қою> болады. Ол үшін тегін графикалық объект тұратын жерге апарып қою керек және ALIGN=LEFT, ALIGN=RIGHT және ALIGN=CENTER атрибутын қосу қажет. Одан басқа HSPACE= және VSPACE= атрибутының (олар төменде сипатталады) көмегімен бейнені мәтіннен айыратын тік және көлденең алаң ұзындығы сұралады. Сонымен қатар бейненің айналасына рамка құруға және кестені мәтінмен жиектеуге болады.
Жалпы айтқанда, CLEAR барлық блоктық тегтер үшін жалпы болып табылады, бірақ та барлығына да іске асырылған жоқ.. CLEAR келесі мәндерді қабылдайды:

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

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

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

Мәтін сол жақтағы жақын арадағы бос алаңнан бастап жалғастырылады

Мәтін оң жақтағы жақын арадағы бос алаңнан бастап жалғастырылады

Мәтін сол және оң жақтағы алаң бос болғанда жалғастырылады

тегі
тегі (No Break, үзіліссіз) браузерге барлық мәтінді бір жолда үзіліссіз бейнелеуге нұсқау береді. Егер тегінде бекітілген мәтін экранға сыймаса, браузер құжат терезесінің төменгі бөлігіне горизонтальды айналдыру жолағын қосады. Егер сіз айкын жерден жолды алып тастағыңыз келсе, сол жерге
тегін қойыңыз.
Символдарды бейнелеуді басқару тегі
Бұл тегтерді екі классқа бөлуге болады: бейнелеу формасын басқару тегі (font style) және ақпарат типін сипаттайтын тегтер (information type). Әртүрлі тегтер бейнелеу кезінде бірдей нәтиже көрсетеді. Ол басты жағдайда програманы түсіндірушінің жөндеуіне және қолданушының ұнатуына байланысты.
Бейнелеу формасын басқару тегі
Курсив, күшейту, асты сызылған, жоғарғы индекс, төменгі индекс, үлкен шрифт, кіші шрифт, қызыл, көк, әртүрлі комбинациялар - бетті көркемдеуге және функциональдауға мүмкіндік береді. Internet Explorer және Netscape Navigator Face= атрибутының көмегімен шрифты анықтауға болады. Енді бір бетке бірнеше шрифт түрлерін біріктіруге болады.
SIZE=атрибуты
тегіндегі SIZE=атрибуты берілген областа мәтін мөлшерін сұрауға мүмкіндік береді. Егер сіз барлық беттің шрифт мөлшерін беру үшін тегін қолданбасаңыз, онда үніздік бойынша 3 алынады.
және тегтері
және тегтері арасында орналасқан мәтін сәйкес келеді.
COLOR=xx атрибуты
Егер сіз өзіңіздің бетіңізді одан әрі әдемілегіңіз келсе, онда тегіндегі COLOR= атрибутын қолдануыңызға болады және басты шектеу компьютердегі қолданушылардың түстер палитрасы болады. Әзірше тек қана танымал браузерлер шрифт түсін бейнелейді.
тегін шрифт түсін ауыстыруға қолданады.

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

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

Ақпарат типін сипаттайтын тегтер
Тегтер
Мәні
...
Типографиялық күшейту
...
Цитирование
...
Усиление
...
Мысал кодын көрсетеді (мысалы, программа коды)
...
Литералықтардың жүйелілігі
...
Клавиатура арқылы символдарды еңгізу мысалы
...
Айнымалылар
...
Анықтау
...
Жақшаға алынған мәтін
Осы тегтерді қолдану кезінде, олардың бейнеленуі программа-интерфейсін қолданушылардың жөнге келтіруіне байланысты екенін ұмытпаған жөн, олар гипермәтіндік программа құрушының жөнге келтіруімен сәйкес келмеуі де мүмкін. Интерфейс жөнге келтірулерін айырбастау стильдерін қолдану, казіргі кезде проблемалық болып келеді.
тегі
(Definition List:) тізіміндегі тегті қолдану қарапайым мәтіндік редакторда шегіністі қолдануды еске түсіреді. тегі мәтінді форматтау үшін құрылған, оңға қарай улкен шегініс арқылы анықталады. тегі номерсіз шегінетін жеке абзацтар және маркерлер құруға арналған. Шегініс ол жақтан басталады. Егер сіздің бетіңізде бірнеше тегі бар болса, онда мәтін ақырын оңға қарай жылжи бастайды. Анықтау соңында жабылған
тегін қойыңыз. Ұмытпаңыз, тегі тек қана абзацтың сол жақ шекарасын хылжытады.
тегі
Тег мәтіннің сол және оң жағынан орын қосады. Бұл қолайлы тег, ол мәтінді беттің ортасына орналастыруға мүмкіндік береді. тегін бірнеше рет қолданған кезде мәтін ортаға бірнеше рет қысыла береді.
Microsoft Internet Explorer және Netscape Navigator тегінде LEFTMARGIN=n және TOPMARGIN=n атрибуттарын қолдануға рұқсат етеді. LEFTMARGIN= атрибуты барлық бет үшін сол жақ орынды береді. TOPMARGIN= жоғарғы орнын анықтайды. n саны орынның енін пиксель бойынша көрсетеді. Мысалы, тегі барлық бет үшін сол жақ енін 40 пиксельде құрады. n арқылы, 0 тең, сол жақ орны шегінеді.
Табуляция
Бұл құралдардың қажеттілігі бұрын пайда болды, тек жақында ғана құрастырушылар ұсынды. Табуляцияны бірнеше тәсілмен беруге болады.
Ең қарапайым, тегін жазу, онда n жаңа абзацтың алдындғы еn-бос орындар санын анықтайды. еn-бос орын - өлшеудің типографиялық бірлігі, сіз қолданатын шрифтағы n әріпінің енімен бірдей. Соған сәйкес тегі ені 4 еn-бос орын болатын табуляция символын алады.
Егер сіз бірнеше орынға берілген мөлшерде табуляция символын қолданғыңыз келсе, онда оның мөлшерін беретін орынға тегін ID= атрибутымен бірге қойыңыз, мысалы, соған сәйкес:

Енді беттің кез-келген жеріне жазса жеткілікті, және табуляция символы TABONE тең болады. Сәйкесінше TABTWO, TABTHREE, TABFOUR ұқсас тәлімен құруға болады.
тегін мәтінде және графикте орналастыруда қолдануға болады.
Тізімдер
Тізімдер мәтін құрылымының негізгі құралдары болып табылады және белгілеулердің барлық тілдерінде қолданылады. HTML-де келесі тізім түрлерінен тұрады: номерленбейтін тізім (реттелмеген), номерленетін тізім (реттелген) және анықтамалдың тізімі. Номерленбейтін тізім тегі (Unordered Lists ) және номерленетін тізім тегі (Ordered Lists ) - бұл HTML негізі. HTML 3.0 номерленбейтін тізімде маркердің әртүрлі типін таңдауда тізім тегіне бірнеше атрибуттар қосады. Тізім ортасындағы маркер типін ауыстыру үшін мынадай (List Item) тегіне атрибут қосуға болады. Жаңа атрибут пайда болған кезде, тізімде қалған маркерлер де осындай түрді алады.
тегі
Номерленбейтін тізім. Номерленбейтін тізім мәтін типін құруға арналған.
тізімнің бірінші элементі
тізімнің екінші элементі
тізімнің үшінші элементі
Берілген тізім келесі түрде жазылады:

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

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

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

және
тегі - бұл номерленбейтін тізімнің басы және соңы, (List Item) тегі тізім элементінің тегін береді. Осы тегке қосымша, тізімді атауға арналған - LH (List Header) бар. Келесі түрдегі номерленбейтін тізімді бейнелейтін мысал келтірейік:
тегі
Горизонтальды сызып алу (horizontal rule) құжатты бөлікке бөлу үшін қолданылады. Бір ғана
тегі арқылы бетке мүлдем өзгеше түр беруге болады. тегін тәжірибеде көріңіз және сонда сіз қолданып жүрген сызықтан өзгеше сызық аласыз.
тегі
Форматтаусыз мәтінді бейнелеу.
тегі
тегі оған қосылған мәтіннің жыпылықтауын туғызады.
Гипермәтіндік сілтеме
Жоғарыда қарастырылған мәтінді бейнелеу құралдары, құжаттың басты тегі - гипермәтіндік сілтемеге - қосымша, сөзсіз маңызды болып келеді. Гипермәтіндік сілтеме жазу үшін, "зәкір (якорь)" (anchor) деп аталатын ...... контейнері қолданылады. Зәкір бірнеше атрибут қабылдайды, ең негізгісі HREF (Hyper Text Reference) болып табылады. Қарапайым сілтемені мына түрде жазуға болады:

Деректер базасының индексі"Жусан"
HREF атрибутының мәні болып, "polyn.net.kiae.su" машинасында "index.shtml" құжат адресі табылады, оған рұқсат HTTP протоколы арқылы беріледі. Осы адрестің жазу формасы универсалды локаторлық ресурс (Universe Resource Locator) деп аталады және WWW технологиясының құрама бөлімі болып табылады.
А контейнерінің мазмұны, тег басы және тег соңы аралығында қосылады, мәтінде контекстік гипермәтіндік сілтемеге арналған түспен бөлінеді.
Web-серверді құрұдың ерекшелігі, онда көрсетілген ақпаратты жеке бөліктерге бөлуге болады. Жеке бөліктер арасындағы байланыс ұйымдары гипермәтіндік сілтеме арқылы анықталады.

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

4-ДӘРІС. Бет дизайнына кестелерді қолдану
Дәріс мазмұны:
* , , , ,
.
* NOWRAP, COLSPAN=, ROWSPAN=, WIDTH=, UNIT=, COLSPEC=, DP=, СELLPADDING=, ALIGN= және VALIGN=, BORDER=, CELLSPACING= атрибуттары.

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

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

тегі.
кестенің тақырыбын құруға рұқсат береді. Үнсіздік бойынша тақырып орталықтанады және () кестесінің үстінде немесе () кестенің астында орналасады. Тақырып кез-келген мәтіннен және бейнеден тұруы мүмкін. Кей кезде тегі сурет астындағы жазуға қолданылады.
NOWRAP атрибуты .
Кестедегі ұяшықтың бір жолына сыймайтын кез-келген мәтін келесі жолға көшеді. Бірақта, NOWRAP атрибутын және тегтерімен бірге қолданғанда ұяшықтың ұзындығы мәтін бір жолға сыятындай етіп кеңейтіледі.
COLSPAN= атрибуты.
және тегтері COLSPAN= атрибутының көмегімен модифицирленеді (Column Span, бағандардың бірігуі). Егер сіз қандай да бір ұяшықты кеңейткіңіз келсе, онда осы COLSPAN= атрибутын қолдануға болады.
ROWSPAN= атрибуты.
және тегтерінде қолданылатын ROWSPAN= атрибуты COLSPAN= атрибутына аналогты болып келеді және ол жолдардың санын береді. Егер сіз ROWSPAN= атрибутында санды көрсетсеңіз, онда жолдың сәйкес саны кеңейтілген ұяшықтың үстінде болуы қажет.Оны кестенің төменгі жағына орналастырмау керек.
WIDTH= атрибуты.
WIDTH= атрибуты екі жағдайда қолданылады.Оны барлық кестенің енін беруде тегіне қоюға болады және ұяшық тобының немесе ұяшық енін беруде немесе тегтерінде қолдануға болады. Енін пиксельмен немесе пайызбен көрсетуге болады. Мысалы, егер сіз тегінде WIDTH=250 деп берсеңіз, онда сіз монитордағы бет өлшеміне тәуелсіз ені 250 пиксель кестені аласыз. тегінде WIDTH=50% беру кезінде, кесте экрандағы кез келген өлшемдегі бейнеде беттің жарты енін алып тұрады.
UNIT=атрибуты.
тегінің UNIT=атрибуты барлық кесте мен оның жеке бағандарының өлшемдерін көрсетуде қолданылатын өлшем бірлікті анықтайды. UNIT=атрибуты үш мәнді қабылдауы мүмкін:
UNIT=EN - үнсіздік бойынша қосылатын мән және en - бос орынға тең өлшем бірлікті береді. Еn - бос орын - әріпінің еніне тең типографты өлшем бірлік. Бос орынның нақты өлшемі таңдалған шрифтке тәуелді: ұсақ шрифтке қарағанда ірі шрифтке en - бос орын көбірек беріледі. Әдетте en- бос орын шрифт өлшемінің жартысына тең. Мысалы, 12 - пунктті шрифт үшін en - бос орын 4 - пунктті алады.
UNIT=RELTIVE барлық кесте еніндегі баға енін процентпен беру үшін қолданылады. Бұл тәсілді мүмкіндігінше проценттегі енді көрсетудің орнына қолдануға болады. Қолданылатын бірлікті беру кезінде енгізілген сандар проценттердегі бағандар ені болып қабылданады.
UNIT= PIXELS - бұл мән экрандағы бағанның енін нақты білуде қолданылады. Бұл жағдайда оны пиксельмен беру оңай. Мысалы, кестенің енін 340 пиксельмен формалайды.
COLSPEC=атрибуты.
UNIT=атрибутымен бірге қолданылатын COLSPEC=атрибуты кестенің әрбір бағаны қанша орын алатынын және онда берілгендер қалай тегістелетінін анықтайды. Тек тегінде ғана қолданылады.
COLSPEC= барлық бағанды санайды және әрқайсысы үшін тегістеу мен өлшем береді. Баған үшін (немесе ұяшық үшін) тегістеудің 5 тәсілі бар: L - сол жақ жиек бойынша, C - центр бойынша, R - оң жақ жиек бойынша, J - оң және сол жақ жиек бойынша және D - ондық үтір бойынша тегістеу. Егер сізде 5 баған болса, онда оның енімен әрқайсысын тегістеуді келесідей анықтауыңызға болады.

DP=атрибуты.
DP=атрибуты (Decimal Point, ондық белгі) ондық бөлгіштің толық бөлімін бөлуде қолданылатын символды анықтайды. DP= "."(үнсіздік бойынша) ондық символ ретінде нүктені көрсетеді. DP= "," үтірді береді.
Бос ұяшықтар.
Егер ұяшық берілгендерді қамтымаса, онда оған шекарада қажет етілмейді. Егер сіз ұяшықтың берілгендері болмай, шекарасы болғанын қаласаңыз сіз оған көрсетілім кезінде көрінбейтін бір нәрсе қоюыңыз қажет.
бос жолын қолдануға болады. Алынған ұяшыққа ешқандай берілгендерді енгізбей-ақ, олардың ендерін пиксельмен анықтап бос бағандарды да беруге болады. Бұл тәсіл бетке мәтін мен графиканы қою кезінде пайдалы болуы мүмкін.
СELLPADDING=атрибуты.
СELLPADDING=атрибуты - ұяшық берілгендерімен оның шекарасы арасындағы бос кеңістіктің енін анықтайды, яғни ұяшық ішінен алаң береді.
ALIGN= және VALIGN= атрибуттары.
, және тегтерін ALIGN= және VALIGN= атрибуттарының көмегімен модифицирлеуге болады. ALIGN=атрибуты мәтін және графиканың горизонталь бойынша тегістелуін анықтайды, яғни оң және сол жақ жиек бойынша, центрі бойынша тегістеу. Горизонталь тегістеу бірнеше тәсілмен берілуі мүмкін:
ALIGN=BLEEDLEFT - ұяшықтың берілгендерін сол жаққа тығыздап қысады.
ALIGN= LEFT - СELLPADDING=атрибутымен берілген ұяшықтың берілгендерін жылжыту есебімен сол жаққа тегістейді.
ALIGN=CENTER - ұяшықтың берілгендерін центр бойынша орналастырады.
ALIGN=RIGHT - СELLPADDING=атрибутымен берілген ұяшықтың берілгендерін жылжыту есебімен оң жаққа тегістейді.
VALIGN= атрибуты - мәтін және графиканы ұяшық ішінен вертикаль бойынша тегістейді. Вертикаль тегістеу келесі тәсілдермен берілуі мүмкін:
VALIGN=TOP - ұяшықтың берілгендерін оның жоғарғы шекарасында тегістейді.
VALIGN=MIDDLE - ұяшықтың берілгендерін вертикаль бойынша орталықтандырады.
VALIGN=BOTTOM - ұяшықтың берілгендерін оның төменгі шекарасында тегістейді.
BORDER=атрибуты.
тегінде үнемі кестенің өзі және кестенің ұяшықтарын қоршап тұратын рамкалардың, яғни сызықтардың қалай көрінетіндігін анықтайды. Егер сіз рамкасын бермесеңіз, онда сызығы жоқ кесте аласыз.
CELLSPACING= атрибуты.
CELLSPACING= атрибуты - ұяшықтар арасындағы аралық енді пиксельмен анықтайды. Егер бұл атрибут берілмесе, онда үнсіздік бойынша 2 пиксельге тең көлем беріледі. CELLSPACING= атрибутын мәтін мен графиканы өзіңізге қажетті жерге орналастыру үшін қолданылады. Егер сіз бос орын қалдырғыңыз келсе, онда ұяшыққа бос орынды жазуға болады.

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

Ұсынылатын әдебиеттер:
1. HTML и CSS на примерах/Мержевич - СПб: BHV, 2005-448 стр.
2. HTML и CSS. Совместное использование/ДеБольт - СПб: НТ-Пресс, 2006-504 стр.
5 - ДӘРІС. Фреймдер

Дәріс мазмұны:
* Фрейм дегеніміз не?
* Фреймдер не үшін қолданылады?
* Фреймдер қалай жұмыс істейді?
* Фреймдік құрылым жасау
* Берілгендері бар фреймді дайындау

Фреймдер
Фрейм дегеніміз не?
Фрейм дегеніміз - сурет айналасындағы жақтау, терезе немесе бет деген сөздермен мағыналас. -деген тегті енгізеді, НТМL-беттің дизайнері экран браузерін бөліктерге бөледі. Нәтижесінде бетті қарап отырған адам оның бөліктерін басқа бөліктеріне тәуелсіз қарай береді. Фреймдерді қабылдайтын браузер әр түрлі беттерді түрлі секцияларға , фреймдарға жүктеп тастайды. Мысалы,сіз бетті өзіңіздің фирмалық белгіңізді экранның жоғарғы бөлігіне орналастырып, қалған бөліктерін қолданушы өзі ары қарай қарапайым тәсілмен ашып отыратындай етіп құруыңызға болады. Жанынан навигациялық батырмалар қоюға болады. Оның көмегімен оқырман осы батырманы тышқанмен шерткенде орын ауыстырылмай, эканның белгілі бір бөлігі ғана қозғалады.
Фреймдер не үшін қолданылады?
Навигация құралдарының немесе фирмалық белгінің фиксациясы - фреймдерді қолданудың көрнекі тәсілі болғаны оларды толық қолдану деген сөз емес. Фреймдерді қолдануда дизайнерлердің ойына ең бірінші саналып өткен шешімдер келеді. Бірақ браузер экранына фрейм қойылған сайын сіз берілгендерді орналастыруға арналған территорияны қысқартып отырасыз. Сіз фреймдерді неғұрлым көбірек кіргізсеңіз, пайдалы кеңістік соғұрлым азаяды және сіз осы әрекетіңізбен фреймдері бар Web-беттердегі навигациялармен таныс емес өз оқырмандарыңызды шатастырасыз.
Мысалы,фреймде ең қажетті беттердің алғашқы бірнеше деңгейлерінде компанияның логотипін сақтап, ал негізгі берілгендерді фреймдерсіз көрсеткен дұрыс.
Фреймдер қалай жұмыс істейді?
Фреймдер күрделі болғанымен оларды түсіну оңай, егер кесте ұяшықтарына аналогия жүргізсе.Фреймдердің экранда орналасуы ұяшықтардың кестеде орналасуы сияқты: тегтер мен атрибуттар кестедегі сияқты жұмыс атқарады. Бірақ, беттегі бірлік фреймдер мен кесте ұяшықтары арасындағы аналогияның маңыздылығымен қоса оның айырмашылығын ажырата білген жөн.Ұяшық берілгендері кестесі бар HTML-бетінің кодында берілген. Кестенің берілгендерін құрайтын мәтін немесе графика, HTML-бетіндегі кестені бейнелейтін тег немесе атрибут сияқты енгізіледі. Керісінше, фреймдері бар экран HTML-бетте (frameset ) деп аталатын сөзбен бейнеленеді. Фреймдердегі берілгендер кез - келген жерде - басқа каталогта, локальді серверде немесе желінің жойылған түйіндерінің бірінде орналасқан бөлек HTML-бет. Фреймдік құрылым фреймі бар экранды ұйымдастыру тәсілін және әрбір фреймнің бастапқы берілгендері қайда орналасқанын ғана анықтайды.Барлық фреймдер үшін олардың берілгендерінің орнын бейнелейтін URL болады. Ереже бойынша фреймдік құрылымы бар бетте олардың берілгендері болмайды.Мұндай бет үлкен емес - ол экранны ңтек кадрлық құрылымын ғана анықтайды.Құжат фреймдерге жүктелген уақытта сіз осы құжаттағы сілтемеге тышқанмен шертіп, басқа кадрлардағы фреймдік құрылымда жасалған бір - бірімен байланысқан құжаттарды шақыруыңызға болады.
Фреймдері бар қарапайым беттерді құру.
фреймі бар НТМL беттерді құру және негізгі тегтер мен атрибуттардың қажеттілігін жақсылап түсіну үшін фреймдері бар қарапайым жолдар жұбын құрайық.
Екі фреймнен тұратын бет құрайық.Сол жақтан басылымдар мазмұнының тақырыбын бейнелейтін, ал оң жақтан басылымдардың өздерін бейнелейтін фрейм құрайық. Қолданушы мазмұн орналасқан экран бөлігіндегі сілемені тышқанмен шерткенде, сол басылым оң жақта пайда болатындай етіп жасайық. Бұл фреймдерді қолдануда кеңінен таралған әдіс.
Фреймдік құрылым жасау.
Алдымен біз фреймдердің қайда орналасуын және олардың қандай мөлшерде болатын беттің жалпы түрін ойластыруымыз қажет.Содан кейін олардың мазмұны жайлы қарастырамыз.Төменде тегінің көмегімен құрылған қарапайым фреймдік құрылымның коды көрсетілген.Мынаған назар аударыңыз:фреймдік құрылымы бар бетте <ВОDY> тегі жоқ.
Берілгендері бар фреймді дайындау
Енді берілгендері бар фрейм жасайық.Сол жақ фреймге оң жақ фреймдегі екі беттің арасында ауысып тышқанмен шертетін menu.html бетін құрайық. menu.html файлы бұл - мазмұн ретінде құрылған қарапайым НТМL-бет. Негізінде біз мазмұны бар дайын бетті алып оны қолдана беруімізге болады. Бұл фреймнің жіңішке жіне биік екенін ұмытпаңыз, сондықтан оған жүктелетін бет соған сәйкес жобалануы қажет. Енді сілтемені тышқанмен шерткенде басқа беттердің қайда пайда болатынын анықтауымыз қажет. Біз олардың оң жақта пайда болуын қалағандықтан сілтеме тегіне ТАRGET= (TARGЕТ="main") атрибутын енгізейік. Бұл қолданушы сілтемені басқан кезде шақырылып отырған бет main фреймінде пайда болады дегенді білдіреді. Біз main фрейміндегі барлық беттерді бейнелегендіктен, мазмұндағы барлық сілтемелердің тегіне ТАRGЕТ="main" атрибутын қосамыз, сонда сол жақтағы фреймде қай жерде тышқанмен шертсек, сол жерде бет пайда болады, ал ол бізге керек емес, бірақ басқа жағдайда олай жасаған керек те болып қалады. Мысалы, сіз жай ғана келесі сілтемелерді шығарып беретін < Мазмұнның басқа пункттері > сілтемесін қосуыңызға болады. Оқырмандар сілтемелердің көптігін байқау үшін мазмұнды ұзынырақ етіп жасаған дұрыс.
main фреймін дайындау
Оң жақтағы main фреймінде HTML-беттер болады. Сіз кішірек болып көрінетіндей терезеде жобалағаныңыз дұрыс, себебі экранның белгілі бір бөлігінде мазмұнның сол жақ кадрлары орналасады. Но больше эти страницы ничем не примечательны.
тегін пайдалану.
Сіздің көптеген қолданушыларыңызда әлі фреймдермен жұмыс істей алмайтын браузерлер бар. Сол себепті сіздің негізгі беттеріңізді фреймсіз ұсынған жөн. Егер сіздің фреймдік құрылымды бетіңізде ескірген браузерлі оқырман болса, онда осы бетте орналасқан < NOFRAMES >және </ NOFRAMES >тегтерінің арасындағылардың барлығы өте жақсы көрініп тұратын болады - браузер жай ғана фреймдерді елемейтін болады. Сондықтан міндетті түрде <ВODY></ВОDY> тегтерін пайдалану керек. Әйтпесе, сіз экранды қайта фреймдерсіз құруыңыза тура келеді. Фреймдік бетке No Frames (Фреймсіз) батырмасын кірістіруге болады. Оның бағыты белгілі. Мұндай әдіс ойға қонымды және тез жүзеге асады.

Өзін тексеруге арналған сұрақтар:
1. Қолданушыдан қайтымды ақпаратты алудың мақсатқа лайықтылығы
2. Қонақ кітап/форумды құру.

Ұсынылатын әдебиеттер:
1. HTML и CSS на примерах/Мержевич - СПб: BHV, 2005-448 стр.
2. HTML и CSS. Совместное использование/ДеБольт - СПб: НТ-Пресс, 2006-504 стр.

ЗЕРТХАНАЛЫҚ ЖҰМЫСТАРДЫ ЖҮРГІЗУГЕ АРНАЛҒАН
ӘДІСТЕМЕЛІК НҰСҚАУЛАР

1-Зертханалық жұмыс. JavaScript пен танысу

Сабақтың мазмұны
JavaScript дегеніміз не. JavaScript - Netscape фирмасында өңделген скриптерді жазуға арналған жаңа тіл. JavaScript көмегімен сіз интерактивті Web- беттеді жеңіл құра аласыз. Бұл бөлімде JavaScript көмегімен не жасау керектігін көре аласыз және оны қалай жасау керектігін көресіз.
JavaScript - бұл Java емес! Адамдар көбісі аттары ұқсас болғандықтан JavaScript - ті Java тілімен бірдей деп ойлайды. Бірақ ол олай емес. Мен сіздерге бұл екі тілдің ұқсас еместігін көрсетемін, JavaScript - бұл Java емес.
JavaScript жүктеу. JavaScript тілінде жазылған скриптерді жүктеу үшін не істеуге болады? JavaScript пен жұмыс істейтін сізге браузер керек, мысалы, Netscape Navigator (2.0 версиясынан бастап) немесе Microsoft Internet Explorer (MSIE - 3.0 версиясынан бастап). Бұл екі браузерде кең таралғандықтан көптеген адамдар JavaScript тілінде жазылған скрипттермен жұмыс істеу мүмкіндіктерін алды. Сіздің web-беттерініңізді жақсарту құралы ретінде JavaScript тілін таңдау маңызды аргумент болып табылады.
Бұл басшылықты қолданған кезде басқа да HTML сияқты тілдеррді қолдануға тура келеді.
HTML- бетте JavaScript - ті орналастыру. JavaScript скрипт коды міндетті түрде HTML - бетте орналасады. Келесі қарапайым мысалда көруге болады:
<html>
<body>
<br>
Бұл қарапайым HTML құжаты.
<br>
<script language="JavaScript">
document.write("Ал бұл JavaScript!")
</script>
<br>
Тағы да HTML құжаты.
</body>
</html>
Бірінші қарағанға мысал жай HTML файлын еске түсіреді. Мұндағы конструкциясы:
<script language="JavaScript">
document.write("А это JavaScript!")
</script>
Бұл JavaScript коды.
Бұл скриптің қалай жұмыс істеуін көру үшін оны жай HTML файлда жазып және оны браузерге жүктеңіз. Нәтижесінде 3 жолды мәтін аламыз:
Бұл қарапайым HTML құжат.
Ал бұл JavaScript!
Тағы да HTML құжаты.
Мұнда <script> тэгінің белгісін көрсетейін дегем. JavaScript тілінің кодттары барлығы <script> және <script/> тэгтерінің аралығында жазылады. Бұл мысалда JavaScript тілінде программалауда қолданатын маңызды командалардың бірі document.write() - қолданылған. Команда document.write() командасын ағымдағы құжатқа жазбалар жазу үшін қолданады ( бұл жағдайда өзіміздің HTML- құжат келтірілген). Біздің кішігірім HTML- құжатындағы JavaScript программасы "Ал бұл JavaScript!" фразасы жазылады. JavaScript қолдамайтын браузерлер. Біздің бетіміз қалай көрінеді егер браузер JavaScript - ті қолдамаса? JavaScript - тің қолдауынсыз болатын браузерлер <script> тэгін білмейді. Олар оның соңында тұрған барлық кодттарды бірін соң бірін кәдімгі текст ретінде шығара береді. Басқаша айтқанда, оқырман, біздің мысалда келтірілген JavaScript кодының HTML-құжатының дәл ортасында ашық текст түрінде орналасқанын көреді. Нәтижесінде біздің жаңаша вариантымыз мынадай түрде келтіріледі:
<html>
<body>
<br>
Бұл қарапайым HTML құжат.
<br>
<script language="JavaScript">
<! -- ескі браузерлерден кодттарды жасырады
document.write("Ал бұл JavaScript!")
// -->
</script>
<br>
Тағы да HTML құжаты.
</body>
</html>
Бұл жағдайда JavaScript қолдамайтын браузерлер былай жазылады:
Бұл қарапайым HTML құжат.
Тағы да HTML құжаты.
Ал HTML - тэгінің коментариясы болмаса JavaScript қолдамайтын браузер мынадай түрде жазылар еді:
Бұл қарапайым HTML құжат.
document.write("Ал бұл JavaScript!")
Тағы да HTML құжаты.
Назар аударыңыз JavaScript кодын жасыру мүмкін емес.
Пожалуйста обратите внимание, что Вы не можете полностью скрыть исходный код JavaScript. То, что мы здесь делаете, имеет целью предотвратить распечатку кода скрипта на старых браузерах - однако тем не менее читатель сможет увидеть этом код посредством пункта меню 'View document source'. Не существует также способа скрыть что-либо от просмотра в вашем исходном коде (и увидеть, как выполнен тот или иной трюк).
Оқиға. Оқиға және оқиғаны өңдеу JavaScript тілінде программалау үшін ең маңызды бөлігі болып табылады. Оқиға тақырып немесе қолданушы басқа іс -әрекетісмен бейнеленеді. Егер ол бірнеше батырмаларды басса, "Click" оқиғасы болады. Егер тышқанның курсоры қандай да бір гиперсілтемені көрсетіп өтсе - MouseOver оқиғасы орындалады. Оқиғаның бірнеше әртүрлі типтері бар. Біз өзіміздің JavaScript-программамызды олардың кейбіреуіне әсер етуіне көмегіміз тиеді. Және де бұл оқиғаны өңдеудің арнайы программасымен жүзеге асырылады. Батырманы басқан кезде ашылған терезе төмен түседі. Бұл мынадай мағана береді, терезені құру Click шерткен кездегі оқиға реакциясы болу керек. Программа - onClick деп аталатын осы жағдай қолданылатын оқиғаны өңдеуші болып табылады. Және де ол компьютерге оқиға нені орындау керектігін хабарлап тұрады. Төменде келтірілген код onClick оқиғасымен өңделген қарапайым мысал келтірілген:
<form>
<input type="button" value="Click me" onClick="alert('Yo')">
</form>
Келтірілген мысал бірнеше жаңа оқиғалардан тұрады - оларды рет - ретімен келтірейік. Бұл жерде біз батырмалы қалып құрамыз(бұл жерде HTML тілінің мәселелерін қарастырмаймыз). <input> тэгіндегі - onClick="alert('Yo')" бірінші жаңа ерекшелігі. Айтып кеткендей, бұл атрибут батырманы басқанда не болатынын анықтайды. Егер Click оқиғасы орын алса, комьютерда alert('Yo') шақырылуы орындалады. Бұл осы мысалда JavaScript тілінің коды болып саналады (Назар аударыңыз, бұл жағдайда біз <script> тэгін қолданбаймыз). alert() функциясы сізге ашылатын терезе құруға мүкіндік береді. Оны шақырған кезде сіз жақшаның ішіне бір жол жазуыныз керек. Біздің жағдайда 'Yo' болып табылады. Бұл осы ашылған терезеде орналасатын текс болады. Мұндай жағдайда оқырман осы батырманы басқан кезде, біздің скрипт 'Yo' тексттен тұратын терезе құрады.
Кейбір кедергілер осы мысалдың тағы бір ерекшелігі болады: document.write () командасында біз екі тырнақша қолдандық ("), ал alert() конструкциясында біреу. Неге? Көптеген жағдайларда тырнақшаның екеуінде қолдануға болады. Бірақ та соңғы мысалда - onClick="alert('Yo')" деп жаздық, яғни біз екі және бір тырнақшаныда қолдандық. Егер біз onClick="alert("Yo")" деп жазсақ, онда компьютер біздің скрипті ажырата алмас еді, конструкцияның қай бөлігінде функцияны onClick оқиғасымен өңдеу керектігі түсініксіз болады. Сондықтан сіз бұл жағдайда екі тырнақша түрінде жазуға тура келеді. Тырнақшаларды қандай жағдайда жазу керектігі міндетті емес, оны былай деп те жазуға болады: onClick='alert("Yo")'. Сіз скрипте көптеген әртүрлі функция типтері оқиғаны өңдеуге қолданылады.
Егер сіз Netscape Navigator браузерін пайдалансаңыз, ашылған терезеде текст мәні JavaScript-те alert функциясымен берілген. Осындай ашылатын терезені сіз prompt() көмегімен дк құруыңызға болады. Бірақ та бұл жағдайда терезеде оқырман енгізген мәтін шығады. Сондықтан, қылмыскерлер жазған скрипт оқырманнан жүйелік хабарлама сұрау мүмкін және пароль енгізуін сұрайды. Ал егер текст ашылған терезенге сиса, онда оқырманға осы терезе web-браузерде құрылғаннын түсіндіреді.
Функциялар. Біздің программамыздың көбісі JavaScript тілінде функциялардың көмегімен қолданамыз. Сондықтан да маған осы тілдің ең маңызды элементі туралы айту керек. Көптеген жағдайда функциялар бірнеше командаларды біріктіруді жүзеге асырады. Бір мысалды қарастырайық, бір тексті үш рет шығаратын скрипті құрастырайық: Бастапқыда қарапайымын қарастырайық:
<html>
<script language="JavaScript">

</script>
</html>
Және мынадай скрипті келесі мәтін жазады:
Менің бетімен қош келдіңіз!
Бұл JavaScript!
үш рет. Егер скриптің шығару кодына қарасақ, қажетті нәтижені алу үшін оның анықталған кодын үш рет қайталанғанын көруге болады. Біз бұл тапсырманы бұдан да жақсы шеше аламыз.
<html>
<script language="JavaScript">

</script>
</html>
Бұл скрипте келесідей жолдан тұратын функцияны анықтадық:
function myFunction() {
document.write("Менің бетімен қош келдіңіз!<br>");
document.write("Бұл JavaScript!<br>");
}
Фигуралық жақшаның ішіндегі {} скриптің барлық командалары myFunction () функциясына жатады. Енді бұл екі командада функцияны шақырған кезде ғана орындалады деген мағана береді. Шындығында біздің мысалда осы функцияны үш рет шақырғанбыз.Біз функцияға анықтама берер алдында myFunction() жолын үш рет жазғанбыз. Сондықтан үш шақыру орындадық. Өз кезегінде бұл функцияда (фигуралы жақшада көрсетілген команда) үш рет орындалғанын білдіреді. Бірақ та функциягны қолдануда қарапайым мысал, сізде сұрақ туындауы мүмкін неге бұл функциялар JavaScript үшін маңызды. Берілген түсініктемені оқығанда олардың қажеттілігін түсінесіз.
Функциялар оқиғаны өңдеуде процедурамен бірге қолдануға да болады. Келесі мысалды қарастырайық:
<html>
<head>
<script language="JavaScript">

</script>
</head>
<body>
<form>
<input type="button" value="Calculate" onClick="calculation()">
</form>
</body>
</html>
Мұнда батырманы басқан кезде calculation() функциясы шақырылады. Бұл функция x, y және result айнымаларын қолданып есептеулер жүргізілгенін көруге болады. Айнымалыларды Var кілттік сөйлем көмегімен анықтауға болады. Айнымалыларды әр түрлі сандар, мәтін жолдарын және тағы басқа өлшемдерді сақтау үшін пайдалануға болады. var result= x + y скрипт жолы браузерге result айнымалысын құру керектігін және оған x + y (т.е. 5 + 12) арифметикалық амалының орындау нәтижесін сидыруды хабарлайды. Одан кейін result айнымалысында 17 саны орналасады. Бұл жағдайда alert(result) командасы alert(17) сияқты орындайды. Біз ашық терезеде 17 деп жазылған санды аламыз.

2-Зертханалық жұмыс. JavaScript объектілерінің иерархиясы.

Сабақтың мазмұны
JavaScript объектілерінің иерархиясы. JavaScript тілінде web-беттерде барлық иерархиялық құрылымнан тұрады.Әр бір элемент объект ретінде қарастырамыз. Және де сондай әр бір объекттің анықталған оқиғасы және тәсілі болады. Өз кезегінде JavaScript тілі web - беттің объектілерімен оңай басқаруға мүмкіндік береді, бірақ ол үшін объектілер иерархиясын білу маңызды болып табылады. Келесі мысалда осының барлығы қалай жүзеге асатынын көруге болады. Қарапайым HTML-бетті қарастырайық:
<html>
<head>
</head>
<body bgcolor=#ffffff>
<center>
<img src="home.gif" name="pic1" width=200 height=100>
</center>
<p>
<form name="myForm">
Name:
<input type="text" name="name" value=""><br>
e-Mail:
<input type="text" name="email" value=""><br><br>
<input type="button" value="Push me" name="myButton" onClick="alert('Yo')">
</form>
<p>
<center>
<img src="ruler.gif" name="pic4" width=300 height=15>
<p>
<a href="http://rummelplatz.uni-mannheim.de/~skoch/">My homepage</a>
</center>
</body>
</html>
Ал бұл бет экранда қалай көрінеді:

Сонымен бізде бір сілтеме және мәтін енгізуге арналған екі жолы бар қалып және бір батырма, екі сурет көрсетілген.
JavaScript тілінің браузер терезесі - бұл window бір объектісі. Бұл объект өз кезегінде қалып күй жолы сияқты, безендірудің бірнеше элементтерінен тұрады. Терезе ішіне HTML құжатын орналастыруымызға болады (немесе қандай да бір басқа типті файлды, бірақ та біз HTML файлдарымен шектеліп отырмыз). Мұндай бет document объектісі ретінде біреу ғана емес. Document объектісі JavaScript тілінде осы сәттегі жүктелген HTML құжатын көрсетеді. document объектісі JavaScript тілінің маңызды объектісінің бірі болып саналады және онымен сіз көп рет қолданасыз. document объектісінің қасиетіне мысалы, web - беттің фонының түсін жатқызуға болады. Примерами объекта HTML объектілерінң мысалы, мысалығы, сілтеме немесе толтырылған қалып. Келесі суретте объектілер иерархиясы келтірілген:

Бұл иерархиядан біз әртүрлі объектілер туралы ақпарат ала алуымыз керек және оны басқара алуымыз керек. Ол үшін,біз JavaScript тілінде әртүрлі объектілерге қалай рұқсат алу керектігін білуіміз керек. Көріп отырғанымыздай әрбір иерархиялық құрылымның өз атауы болады. Егер өзіңіздің HTML бетімізде бірінші суретке шығу үшін иерархия объектісіне бағытталу керек. Бастағанда ең басыннан бастау керек. Мұндай структураның бірінші объектісі document деп аталады. Беттегі бірінші сурет images[0] объектісі ретінде көрсетілген. Бұл объектіге біз JavaScript - ке document.images[0] деп жазу арқылы рұқсат ала аламыз. Егер де, мысалы, қалыптың бірінші элементіне оқырман қандай текст қалдырғанын білгіңіз келсе, онда біріншіден осы объектіге қалай рұқсат алу керектігін білу керек. Және де тағы да өзіміздің объектісі иерархиясы басынан бастаймыз. elements[0] атаулы объектіге жол көрсетеміз және барлық объектілер атауларын жазамыз. Текст жазу үшін бірінші жолға рұқсат алу үшін, мынадай тұрде жазуға болады:
document.forms[0].elements[0]
Ал енді оқырман жазған тексті қалай білуге болады? Осы ақпаратқа объектінің қай қасиеті мен тәсілі рұқсатты бар екенін білу керек, ол үшін JavaScript қандай да бір анықтамасына жүгіну керек (мысалы, ол Netscape фирмасы ұсынған құжат болуы мүмкін, немесе менің кітабым). Текст енгізуге арналған жолға сәйкес келетін элемент value қасиетін қабылдайды, және де ол енгізілген текстке сәйкес келеді. Енді біз іздеген мәнімізді оқи аламыз. Ол үшін JavaScript тілінде мынадай долды жазу керек:
name= document.forms[0].elements[0].value;
Алынған жол name айнымалысына кіреді. Ендібіз бұл айнымалымен өзімізге керектей айналысамыз. Мысалы, alert("Hi " + name) командасын орындау арқылы, ашылатын терезе құра аламыз. Нәтижесінде егер оқырман бұл жолға Stefan' сөзін еңізсе, онда alert("Hi " + name) командасы бойынша ашылатын терезеден ' Hi Stefan ' сәлемдемесі ашылады.
Егер сіз үлкен беттермен жұмыс жасасаңыз әртүрлі объектілер процедура адрестері түсініксіз болу мүмкін.
Мысалы, document.forms[3].elements[17] document.forms[2].elements[18] объектілеріне қалай назар аударуға болады? Біздің мысалдан көруге болады:
<form name="myForm">
Name:
<input type="text" name="name" value=""><br>
...
Бұл жазу forms[0] объектісі енді тағы да екінші myForm атауына ие болады. Тура осылай elements[0] орнына сіз name деп жаза аласыз. Мұндай жағдайда
name= document.forms[0].elements[0].value;
Сіз былай жаза аласыз:
name= document.myForm.name.value;
Бұл JavaScript-те көптеген объектілері бар әсіресе үлкен web-беттерді программалауды жеңілдетеді. JavaScript - те көптеген объектілердің қасиеті тек оқуға ғана жеңіл емес. Сіз оларға жаңа мәндерді жазуға мүмкіндігіңіз бар. Мысалы, JavaScript құралдарымен сіз еске түсіретін жаңа жолды жаза аласыз.
Мысалы, JavaScript коды, <input> екінші тэгіндегі onClick қасиеті жазылған:
<form name="myForm">
<input type="text" name="input" value="bla bla bla">
<input type="button" value="Write"
onClick="document.myForm.input.value= 'Yo!'; ">
Берілген мысалдың әрбір деталін жазып отырғанға мүмкіндік болмай тұр. Жақсы болар еді егер сіз JavaScript объектілер иерархиясын өзіңіз түсінсеңіз. Қорытындысында кішігірім мысал жаздым. Мұнда сіз әртүрлі объектілер қалай қолданылатынын көресіз. Скриптің жазылу коды:
<html>
<head>
<title>Objects</title>
<script language="JavaScript">

</script>
</head>
<body bgcolor=lightblue>
<form name="myForm">
<input type="text" name="myText" value="bla bla bla">
<input type="button" name="button1" value="Button 1"
onClick="first()">
<br>
<input type="checkbox" name="myCheckbox" CHECKED>
<input type="button" name="button2" value="Button 2"
onClick="second()">
</form>
<p><br><br>
<script language="JavaScript">

</script>
</body>
</html>
location объектсі. JavaScript - те window және document объектілерінен басқа тағы да бір маңызды объект - location бар. Бұл объектіге жүктелген HTML-құжаты көрсетілген. Мысалы, егер сіз http://www.xyz.com/page.html бетін жүктесеңіз, онда location.href мәні осы адреске сәйкес келеді. Біз үшін аса маңызды болды, location.href - ға өз жаңа мәндеріңізді жаза аласыз. Мысалы, келтірілген мысалда батырма ағымдағы терезені жаңа бетке ашады.
<form>
<input type=button value="Yandex"
onClick="location.href='http://www.yandex.ru'; ">
</form>

3-Зертханалық жұмыс. Скрипттерді құру мен орналастыру.

Сабақтың мазмұны.
Бұл сабақ сіздерді Өз беттеріңізде скриптерді (JavaScript тілінде) құру мен орналастырумен таныстыруға арналған. Талқылау барысында JavaScript тілінде скриптті жазу кезінде нені істеуге болатындығы және нені істеуге болмайтындығы жайында бірнеше кеңес беріледі.
Скрипт. Төменде берілген скриптің мақсаты Web бетке қызыл түсті мәтінді орналастыру болып табылады:
<SCRIPT LANGUAGE=JavaScript">
document.write("<FONT COLOR='RED'>"Это текст красного цвета</FONT>")
</SCRIPT>
Скриптті өңдеудің әсері. Web бетте қосымша пайда болады
Бұл қызыл түстегі мәтін
Скриптті талдау . Бұл біздің бірінші скрипттіміз болғандықтан, өте қарапайым, сондықтан JavaScript тілі туралы жалпы қарастырып өтейік.
JavaScript деген не? Біріншіден , ол Java емес . Java мен JavaScript екеуі бір деп шатаспау керек. Java ол Sun Microsystems фирмасы құрған программалау тілі, ал JavaScript Netscape фирмасының адамдарымен құрылған.
Екі тілдің ұқсастығы екеуінің де объектіге бағытталған программалау тілі болуында. Бұл сіздің бүтінді құрайтын аз объектіні құратыныңызды білдіреді. Бұл сөйлем курстың ары қарай жылжуында түсінікті болады. Екі тілдің негізгі айырмашылығы Java тілінде өз бетіңше программа құруға болады. Java-"апплет" (осылай аталатын үлкен е,мес қосымша) Web-бетте орындала алады, бірақ, шынында бұл программа толығымен кіші өз бетінше программа болып табылады. Толығырақ, Java-программа тест сияқты орындала алмайды(JavaScript-программасына қарсы). Оны орындауға жібермес бұрын, машина тіліндегі программаға айландыру керек.
JavaScript тілі Java тіліне жақын себебі, Netscape жеңілдетілген Ява тілінің қарапайым командалар жиынын теріп алған. JavaScript тіліндегі программа өздігінен орындала алмайды. Ол Web - бетте орындалуы керек, ал Web - бет JavaScript тілін түсінетін браузерде қойылу керек. Мысалы, Netscape браузердің 2.0 версиясы.
JavaScript скриптінің жазылуы.Біріншіден естеріңізде болсын, JavaScript бұл HTML емес!Көбінесе біреуі екіншісінің версиясы емес пе деген сұрақ жиі қойылады. Жоқ, олай емес. Сонымен қатар JavaScript тілінде скрипт жаза отырып Сіз HTML тілінің ережелеріне ұқсас көптеген ережелермен жұмыс істейсіз. JavaScript тіліндегі прогрмма HTML құжатында болмауы керек. Программаның нақты орналасуы туралы кейінірек қарастырамыз. JavaScript тіліндегі программалар HTML құжаттарында мәтін ретіде сақталады.Негізгі айырмашылығы HTML тілі қателерге өте бейім. HTML тілі үшін пробелдердің маңызы жоқ. Сөздер мен абзацтардың арасындағы қалтырылған бос орындардың да маңызы жоқ. HTML құжатын ұзын бір жол ретінде жазуға да болады. Оның да маңызы жоқ.
JavaScript тілінде тура қарама қарсы жағдай. Онда жариялу формасының шектеуі бар. Кейбір жағдайда форманы өзгерту жағымсыз қорытындыға әкеп соғады. Бұл сабақтың скриптінің екінші жолы келесідей болуы керек:
document.write("<FONT COLOR='RED'> Бұл мәтін қызыл түсті </FONT>")
Егер Сіз бұл жолды былай өзгертетін болсаңыз:
document.write("<FONT COLOR='RED'> Бұл мәтін қызыл түсті </FONT> ")
онда қате туралы хабарлма аласыз (біз қатені және оны жөндеуді келесі сабақта қарастырамыз).
JavaScript -ті редакциялау. Скрипті жазу немесе редактірлеу кезінде скрипт мәтіні шетінде шектеулердің пайда болмуын қадағалаңыз. Әрқашан скрипті жазу немесе редактрлеу кезінде ені бойынша шектеуі жоқ редакторді қолданыңыз. Сіз жолды оң жағынан жалғастыруға әрқашан дайын болуыңыз керек. Егер олай болмаса, Сізде күрделі проблема пйда болуы мүмкін.
JavaScript әріптер регистрін есепке ала ма? Иә.
Скрипті талдауға кері қайту. Жоғарыдан бастайық. Мәтіннің бірінші жолы төмендегідей:
<SCRIPT LANGUAGE="JavaScript">
Бұл жол браузерге төмендегі JavaScript тіліндегі скрипт екенін хабарлайлын HTML коды болып табылады. Бұл өте қарапайым болып көрінеді. JavaScript тіліндегі барлық скрипттер мына командадан басталады.
LANGUAGE="JavaScript" туралы қалай? Бұл анықтама шынымен қажет пе? Иә. Скрипттің басқа түрлері бар ма, мысалы, VBS және LiveScript . LANGUAGE командасын қолдана отырып, скрипт тілі туралы ақпаратты тура браузерге беруге болады.
Бізде бұл жерде кодтың үш жолы ғана болғандықтан, ең соңына түсейік: </SCRIPT>
Бұл тег кез келген JavaScript - ті аяқтайды. Ерекшеліксіз. Есіңізде болсын скрипт <SCRIPT LANGUAGE="JavaScript"> тегінен басталып, </SCRIPT> тегімен аяқталады.
Енді тегтің мазмұнды бөлімімен айналысамыз:
document.write("<FONT COLOR='RED'> Бұл мәтін қызыл түсті </FONT>")
Бұл скриптің қарапаымдылығы соншалық, Сіз оның әр бөлімінің не істейтінін таба аласыз. Бір терминдерді қолдану үшін бұл жолды қарастырып өтейік.
Ең бірінші DOCUMENT ( HTML құжаты) пайда болады. Құжат WRITE командасының көмегімен өзгертіледі, бұл комнданың көмегімен құжатқа бірнәрсе жазыла алады.
Енді кейбір терминдер турал. Құжат (DOCUMENT) <<объект>> ретінде анықталады. Нүктеден кейінгі WRITE командасы объкетінің әдісі ретінде анықталады. Сондықтан жалпы жағдайда, скрипт объекті алып (бар бір нәрсені) және оған бірнәрсені жазуды білдіреді. Жақша ішіндегі ол әдісті жүзеге асыру немесе әдістің объектіге әсер етуі. Жақшаның ішіндегі тырнақшаға алынатынына назар аударыңыз. HTML тілінде тырнақша керек емес, ал JavaScript тілінде олар керек ,сондықтан оларды қолданыңыз.
Тырнақша ішіндегі мәтін бұл HTML тілінің қарапайым коды. Сізге мәтінді мәтінге қызыл түс беретін FONT командасы ретінде тану керек. HTML тілінің тырнақшалары біреу екеніне назар аударыңыз. Олар солай болуы да керек. Егер Сіз екі тырнақша қолдансаңыз, онда JavaScript жолдың соңы деп қабылдайды, ал Сіз тек объекттке жолдың бөлігін ғана жазасыз. Нәтижесінде қате туралы хабарлам пайда болады.
Есіңізде болсын: Екі тырнақшаның ортасында бір тырнақшаны қолданыңыз.
Сонымен, шынында да JavaScript мәтінді қызыл түске бояй ма? Жоқ. Оны ол үшін HTML істейді. Ал JavaScript-тің бар істегені ол кодты бетке жазды.
Тапсырма
Скрипті қызыл және көгілдір екі жол жазатындай етіп өзгертіңдер:
Бұл мәтін қызыл түсті
Бұл мәтін көгілдір түсті
Жауап:
<SCRIPT LANGUAGE="JavaScript">
document.write("<FONT COLOR='RED'> Бұл мәтін қызыл түсті
</FONT><BR>")
document.write("<FONT COLOR='BLUE'> Бұл мәтін көгілдір түсті
</FONT>")
</SCRIPT>

4-Зертханалық жұмыс. Қате туралы хабарлама

Сабақтың мазмұны
JavaScript туралы кітаптарда қандай тақырып мүлдем жоқ екенін білесіз бе? Қате туралы хабарлама туралы тақырыптар. Басынан бастап соңын дейін қате болмайды деп жорамалданған. Нақтылыққа хош келдіңіздер.
Егер де Сіз скрипті жазып және өзіңіздің Web бетіңізге орналастырмақ болған болсаңыз, онда Сіз <<көңіл көтеруге>> жақын біраз <<қуанышты>> білесіз. Сіз бәрі орынында деп ойлап болмай-ақ бәрі бұзылады! Мынадай пайда блады:
Бұл сабақ қате турал хабарлама шыққанда не істеу керектігін үйретуге арналған. Қалыпты түрде скрипт жазушы адам мыңдаған қате туралы хабарламалармен кездеседі. Егер Сіз скрипт жазып бастаған болсаңыз, онда Сіз міндетті түрде қате туралы хабарламамен кездесесіз.
Ескерту! MSIE (Internet Explorer) мен Netscape Navigator - дың соңғы версияларында, Сіз жоғарыда көрсетілген терезені ала аласыз, қатені хабарлаудың жаңа тиімді әдістері пайда болды.
Егер Сіз MSIE қолданған болсаңыз,қате туралы хабарлама үшбұрыштың ішінде сол жақ бұрышта пайда болады. Үшбұрыштың ішінде леп белгісі болады. Сондай - ақ бетте қате бары туралы мәтін болады. Үшбұрышта тышқанмен шерту арқылы осы сабақта талқыланатын қате туралы хабарлараны аламыз. Егер Сіз үшбұрышты шертпей қате туралы хабарма алғыңыз келсе, онда Tools негізгі мәзіріндегі Internet Options пункт астын таңдаңыз. Осы пункт астынан Advanced закладкасын шертіп және жолға қарама - қарсы келесі белгілеуді ерекшелеңіз: "Display a notification about every script error".
Сіздің жүйеңіздің конфигурациясына байланысты, Сіз қте туралы хабарламаны бірден ала аласыз. Қате туралы хабарламаны алу үшін "Details" батырмасын басу керектігін ескеріңіз.
Егер Сіз Netscape Navigator - дың соңғы версияларымен жұмыс істейтін блсаңыз , онда инструкцияны дәрежелік жолдан ала аласыз. Егер қате бар болса, онда Сізден JavaScript - ті басып шығаруды сұрайды: адрестік жолда (location bar). Сондан кейін Сіз қате мен ол туралы мәтінді аласыз.
Қате туралы хабарлама. Негізінен қате туралы хабарлама екі түрде болады: синтакстік қате және орындалу уақытының қателері (семантикалық). Синтаксистік қателер бірнәрсені қате жазғаныңызды немесе JavaScript -тің дұрыс конфигурацияламағанын білдіреді. Орындалу уақытының қателері Сіздің программаңыздың дұрыс емес команда тудырғанын білдіреді. Кез келген жағдайда себеп біреу ғана . Бір жерде бір нәрсе шатастырылған.
Қазіргі кезде қатені түзетуге арналған программалар бар. Түзету процессі жөндеу деп аталады ("debugging"), бірақ бәрін қолмен де түзетуге де болады, бұл бір қарағанға жеңіл.
Қатені түзету. Қатені түзетудің ең жеңіл түрі оны жібермеу болып табылады. Шындығында ол істеуге қарағанда, айтуға ғана жеңіл. Жолдың еніне шектеу қоймайтын редактормен жұмыс ісиеу арқылы Сіз қате туралы хабарламаның санын азайта аласыз. Тағы бір ереже, JavaScript- тің әр командасы өз жолында жазылуы тиіс. Жолды екіге бөлудің қажеті жоқ. Шындығында бөлу қатенің көбеюіне әкеп соғады. Сіз жаңа тілід үйренуде міндетті түрде қате жіберетін боларсыз, сондықтан қателерді қлай жою керектігін қарастырайық.
JavaScript тілінің қатені хабарлауының жақсы қасиеті ол қай жердегі қандай мәселе қате тудырып тұрғанын айтатындығы. Жоғарыда келтірілген қате туралы хабарламаны тағы бір рет қарастырыңыздар. Ол скрипттің дұрыс жазылмағаны туралы синаксистік қате және қате 29 жолда орналасқан.Сондай - ақ , қате туралы хбрлама мәселелік аймақты нұсқайды. Егер HTML - де де жағдай осындай болса жақсы болар еді.
Қате жолы. Қате туралы хабарлмаада жол нөмірі нұсқалған болса, онда ол жол скрипттің басынан бастап емес, HTML құжатының басынан басталып саналады. Мысалы, төмендегі құжаттың қатесі 9- жолда . Бұл синтаксистік қате , себебі команда басталған жолында аяқталған жоқ.
<HTML>
<HEAD>
<TITLE> JavaScript тілінің №2 сабағы </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write(" Бет үшін мәтін "
)
</SCRIPT>
</BODY>
</HTML>
Неліктен қате 9 жолда? Себебі сіз HTML құжатының басынан бастап санайсыз. Төменде сол құжат тағы бір рет келтірілген, бұл жолы жолдар нөмірленген.
(line 1)<HTML>
(line 2)<HEAD>
(line 3)<TITLE> JavaScript тілінің №2 сабағы </TITLE>
(line 4)</HEAD>
(line 5)
(line 6)<BODY>
(line 7)
(line 8)<SCRIPT LANGUAGE="JavaScript">
(line 9)document.write("Бет үшін мәтін "
(line 10))
(line 11)
(line 12)</SCRIPT>
(line 13)
(line 14)</BODY>
(line 15)</HTML>
Жолды санағанда бос жолдарды да санайтындығыңызды ескеріңіз.
Енді не? Сіз қат бар жолда тұрсаңыз, не істеу керек екенін шешуіңіз керек. Көптеген жағдайда қате синтксистік болады, жол ертерек бөлінген немесе бірнәрсе дұрыс жазылмаған немесе бір тырнақшаның орнына екі тырнақша жазып қойдыңыз.
Егер қате орындалу уақытына баланысты болса, қате туралы хабарлама орыдалмайтын қатеге нұсқайды. Мысалы, Сіз батырманы терезе шақыратын командамен шақырдыңыз.
Көпсанды қателер . Қате туралы шыққан бірнеше хабарлама міндетті түрде қате сонша деген сөз емес. JavaScript тілі жоғарғы дәрежедегі логикалық тіл, ол барлық нәрселер сызықты түрде болғанын қалайды. Ұзақ скриптта Сізде 10 қате бар деп айталақ. Қате туралы хабарламалар шыққандағы, ең біріншісі ең соңғысы болып табылады. Ең соңғысынан бастамаңыз. Себебі оның болмауы да мүмкін. Бірінші қате қалғандарын тудыруы мүмкін. Сондықтан, қателерді HTML құжатының басынан бастап төменге қарай жөндеген жөн.
Қателерді бір реттен түзетіңіз және әр түзетуден кейін скриптті жауып отырыңыз. Басында Сізде 20 немесе одан да көп болуы мүмкін, ал 1 немесе 2 ғана түзету жеткілікті.
Бір нәрсе анықталмаған. Бұл өте кең ауқымды. Олар скрипте бір нәрсе дұрыс жұмыс істемей тұрғанын білдіретін орындалу уақытының қателері. Біріншіден, командалар уақытынан бұрын жаңа жолға бөлініп кетпегенін қарау үшін скрипт мәтінін тексеріп көру керек. Егер солай болған жағдайда программа мәтініп бөліктеп алып тастаңыз. Алынып тасталған мәтінді әрқашан қайтаруға болады. Жаңылыс жазу пайда болады. Мәселе жаңылыс жазуда емес екеніне мән беріңіз. Жаңылыс жазу күтілгеннен көп кездеседі.
Қате туралы қазір аз ғана айтуға болады. Жоғарыда келтірілген ескерулерден пайда болған барлық қатенің 99% жоюға болады. Есіңізде болсын қате туралы хабарлама алу ол плюс. Қате бар болғанда бірақ хабарлама болмаса қате қайда түсініксіз бос бет аласыз. Егер дұрыс түсінсеңіз қате туралы хабарлама өте пайдалы.
Тапсырма
Төменде прогонкасы екі қате туралы хабарлама беретін беретін скрипт мәтіні берілген. Сіздің міндетіңіз скрипт қатесіз жұмыс істейтіндей қатені түзету. Сіз барлық командаларды білмеуіңіз мүмкін, бірақ бұл жағдайда ол аса қажет емес.
Егер скрипт дұрыс өңдесе, онда сіз бетте ағымдағы датаны алуыңыз керек. Нұсқау: Скриптті жапқан кезде, бір қате туралы хабарлама алуыңыз мүмкін. Екінші хабарлама бірінші қатені түзеткенде ғана пайда болады.
<SCRIPT LANGUAGE="JavaScript">
...x
dothis = new Date()
month = dothis.getMonth()
month = (month * 1) + 1
day = dothis.getDate()
year = dothis.getFullYear()
document.wrte(" ",month,"/",day,"/",year," ")
</SCRIPT>
Скрипт ағымдағы датаны шығарады. Егер датаны алған болсаңыз онда Сіз екі қатені түзеттіңіз. Біріншісі "...x" өрнегі анықталмаған деп ұйғарады. Бұл қатені жөндеудің ең жылдам жолы - жай келтірілген мәтінді өшіріп тастау. Ал скриптті қайта жіберген кезде "document.wrte" өрнегі функция емес деген хабарлама аласыз. Себебі "wrіte" сөзінің қате жазылуы.

5-Зертханалық жұмыс. Күн мен уақыт

Сабақ мазмұны
JavaScript тілінде скрипті жазудың жақсы жағы бұл тілде бар және оларды алып бетке қоя салуға болатын көптеген алдын ала өңдемелердің бар болуы. Бастапқы екі сабақтың скриптерін өолдана аламыз. Бұл сабақта біз жеті жаңа әдістер туралы өтеміз: getDay(), getDate(), getMonth(), getFullYear(), getHours(), getMinutes(), and getSeconds(). Бұл функциялардың әр қайсысы бар және Сіздің Web бетіңізге қойыла алады. Бұлар функция ғана екені басты мәселе.Оларға олар әсер ететін объект қажет, құжат- объект жарамайды, сондықтан оларды құру керек.
Скрипт
<SCRIPT LANGUAGE="JavaScript">
//Скрипт Сіздің сайтқа кірген күніңіз бен уақытыңызды жазады
RightNow = new Date();
document.write("Текущая дата: " + (RightNow.getMonth()+1)+
"-" + RightNow.getDate() + "-" + RightNow.getFullYear() +
". Вы попали на эту Web страницу точно в: "
+ RightNow.getHours() +
":" + RightNow.getMinutes() + " и " + RightNow.getSeconds() +
" секунд")
</SCRIPT>
Негізінде document.write командасы толығымен бір бетте болуы керек. Ол барлық команданы бір экранда көру үшін бөліктеліп жазылған.
Скриптті өңдеудің әсері. Сайтқа кірген күн мен уақыт шығады.
Скриптті талдау . Скрипттің өлшемінен қорықпаңыз. Барлығы жақын арада жөнделеді. Скрипт формасын енгізіңіз, бір жол экраннан кетіп қалады. Бұл форма сақталу керек. Жолды бөлуден қате туындауы мүмкін.
<<//>>символдары нені білдіреді? Курста алдыға жылжыған сайын жаңа командалар пайда болады. Бұл солардың бірі. Ол скриптегі коментариді білдіреді.Ол символдан кейінгі мәтін скрипттің жұмысы кезінде қолданылмайды. Сіз қанша болса да коментарий жазуыңызға болады , бірақ ол <<//>>символдарынан басталуы керек.
Күн мен уақыт әдістері. Егер Сіз жоғарыда көрсетілген скритқа тағы бір рет қарасаңыз, оның функционалдығы бетте күнмен уақыттың жазылуынан құрылатынын көресіз. Қосымша сөздер қайда қарау керектігін түсіндіреді. Әр позиция "getSomething()" әдісімен құрылады. Әдіс атын жазуда әріптер регистрі маңызды екені есіңізде болсын. "g" әріпі жодық, ал Сіз алатын сан атының бірінші әріпі жазылымдық.
Біріншіден,барлық позициялар сандық екені есіңізде болсын.Олар садарды қайтарады. Тіпті апта күндерін білдіретін getDay() әдісі де 1 ден 7 ге дейінгі сандарды қайтарады.
Скрипт шақыратын бірінші ай әдісінен бастайық. Жоғрыда айтылғандай "getMonth()" бұл әдіс.Осыны айтысымен "getMonth()" қай объектіге тиісті екенін ойлауымыз керек. (Бірінші сабақты естеріңізге түсіріңіздер, Әдіс объектіге әсер етеді.)
Скрипттен "getSomething()"функциясы "document" объектісінің әдісі сияқты. Ол олай емес. "document" объектісінің әдісі "write" болып табылады. "getMonth()"функциясы шындығында Date объектінің әдісі. Қайта скриптке қарайық . "Date" типінің объектісі келесі командамен құрылған:
RightNow = new Date();
Объектіні Zork немесе Fred деп атауға болушы еді. Бұл жағдайдағы бастысы ат оригинальді болуы керек, JavaScript тілінде де программада да басқа мағынадағы бұндай кілттік сөз болмауы керек. Бұл форматты әрқашан дата мен уақытты қолданғанда қолданыңыз.
Мүмкін Сізге бұл күрделі көрінетін шығар, мүмкін new Date = RightNow дұрыс шығар,бірақ ол олай емес. Ойанбастан сүйенуге арналған бірмәнді анықталған ережелер бар.
Команда RightNow айнымалысы Date()типінің немесе Date()құрылымының объектісі екнін білдіреді. Туылған күні жаңа болуы керек. Сөйтіп, Сіз бетке әр кірген сайын немесе бет жүктелген сайын жаңа уақыт аласыз. Жаңа командасыз уақыт статистикалық болып қалушы еді. Сонымен қатар команда соңында нүктелі үтір болатынын есіңізде сақтаңыз. Ол команданың соңын білдіреді, яғни JavaScript - тің командасы аяқталды. Ол белгі болмаса браузер команда келесі жолда жалғасады деп түсінеді. Ол қате.
Ура! Бізде "getMonth()" әдісі әсер ететін объект бар. Біз ай бетке шықсын дейміз, сондықтан бізге document.write()командасы қажет. Сонымен қатар жақша ішіндегінің бетке шығатынын білеміз, сондықтан бәрін жинақтаймыз:
* Бірінші <SCRIPT LANGUAGE="JavaScript"> жолын орналастыру керек .
* Содан кейін скрипттің не істейтіні туралы комментариді орналастырамыз.
* Объектіні getMonth() функциясын қолданбас бұрын құруымыз керек, сәйкес команданы қоямыз және нүктелі үтірді де ұмытпаймыз.
* Енді document.write командасын жазамыз.
* document.write командасында бірінші сабақ форматына сүйенеміз.
* Бетте жазылатын мәтін екі тырнақшаның ішінде болуы керек. Бір тырнақша HTML тэгінде қолданылады.
* Жаңа ереже: Команда мен мәтіннің сәйкестенуі арасында плюс (+) белгісін қажет етеді.
* Объект пен әдіс бөлетін нүкте арқылы жазылады, яғни келесідей: RightNow.getMonth().
* Жаңа ереже : RightNow.getMonth() бұл жазылатын мәтін емес, ол айды беретін команда , сондықтан оны жазғанда тырнақша қажет емес.
* getMonth функциясымен жұмыс нәтижесіне 1 қосылғанын ескеріңіз: (RightNow.getMonth()+1). Себебі , бірінші айдың нөмірі нөлдік, сондықтан дұрыс реттік нөмір алу үшін бірді қосқан жөн.
* </SCRIPT> тэгімен аяқтаңыз
Біздің алатынымыз:
<SCRIPT LANGUAGE="JavaScript">
// Бұл скрипт ағымдағы айдың реттік санын көрсетеді
RightNow = new Date();
document.write("Бұл ай: " + (RightNow.getMonth()+1))
</SCRIPT>
Скрипттің толық мәтініне тағы бір рет қараңыз. Мәтіннің ұзақ жолы енді түсініксіз болып көрінбейді.Бұл жай "RightNow" объектісі, оның соңынан "getSomething()" әдісі болады. Үлкен скриптте олар тырнақшаға алынған тасымалдау белгісімен бөлінген. Тасымалдау белгісін жазу кеек болған соң оны тырнақшаға алу керек екендігі есіңізде болсын. Сонан соң барлық бөліктер плюс (+) белгісімен біріктірілген.
Пробелдерді қосып. Бұл Сіз білу керек трюк. Плюс белгісіне дейін де одан кейін де неше пробел болса да ол бетте жазылмайды.Сондықтан егер Сізге бос орын қажет болса оны мәтінмен бірге жазу керек. Мысал: " Бұл дата "
Жабатын тырнақша алдындағы пробелдерге қараңыз, бетте сонша бос орын жазылып шығады. Есіңізде болсын бұл HTML емес. Бұнда побелдерге қатысты өз ережелері бар .
Ұзақ жолды орналастыру. Біз барлығын аяғына дейін аяқтамаймыз , себебі бөліктерін өзіңіз де жасай алуыңыз мүмкін. Біз тек толық датаны ғана жасаймыз. Ол келесі түрде болады:
document.write("Ағымдағыдата: " + (RightNow.getMonth()+1)+
"-" + RightNow.getDate() + "-" + RightNow.getFullYear() + ".
Сіз бетке кірдіңіз: " + RightNow.getHours() +
":" + RightNow.getMinutes() + " and " + RightNow.getSeconds() +
" секунд")
1. Үзіліссіздік үшін соңына пробел қойып, " Ағымдағы датадан: " бастаймыз .
2. Келесісі плюс белгісі.
3. (RightNow.getMonth()+1) функциясы тырнақшасыз жазылады, себебі біз бетте функция атының жазылғанын қаламаймыз, бізге функция қайтаратын сан керек.
4. Тағы бір плюс белгісі.
5. Енді тырнақша ішіндегі тире, ол бір санды екіншісінен ажыратады. Пробел жоқ, себебі сандар бірінен соңбірі орналасуы керек.
6. Плюс белгісі.
7. Енді күннің нөмірін алу үшін RightNow.getDate() функциясын тырнақшасыз қоямыз.
8. Плюс белгісі.
9. Бетте дұрыс жазылуы үшін тағы бір тире.
10. Плюс белгісі.
11. Жыл нөмірін қайтару үшін тағы бір RightNow.getFullYear()функциясы.
Танымалы қиындықтар: Айлардың саналуы нөлден басталатындықтан, getMonth() функциясы бірге кем ай нөмірін қайтаратынын тағы бір еске салып өтейік.Қызық бірақ ол солай.
Бұндай жағдайда не істеу керек?Әрине, 1 ді қосу керек! Ол мынадай түрде болады:
<SCRIPT LANGUAGE="JavaScript">
RightNow = new Date();
var mpo = RightNow.getMonth();
var mpo1 = mpo + 1;
document.write("Ағымдағы ай нөмірі " +mpo1+ "");
</SCRIPT>
Сіздің алатыныңыз:
Ағымдғы ай нөмірі X,
Мұндағы Х - ағымдғы ай нөмірі.
Тапсырма
Әртүрлі иілген сызықтармен айды жазатын скрипт жазыңыз . Қарсы алатын жасыл мәтін жазыңыз.Өз скрипттіңізді комментациялаңыз.
Жауап:
Жаттығу тапсырмасын орындайтын скрипт:
<SCRIPT LANGUAGE="JavaScript">
//Бұл скрипт Joe Burns'пен Ph.D жазылған .
RightNow = new Date();
document.write("<FONT COLOR='green'> Менің бетіме хош келдіңіз! Сіз бетке кірдіңіз:</FONT> " + (RightNow.getMonth()+1)+ "/" + RightNow.getDate() + "/" + RightNow.getFullYear() )
</SCRIPT>
Заметьте, что добавлен тэг Бір тырнақшаны қолданатын, жасыл түске боялатын мәтіні бар FONT тэгі жазылғанын ескеріңіз. Датаны жазатын бскрипт бөлігі көшіріліп алынып мәтінге қойылған, содан соң сызықтар слэштерге алмастырылған.

ОСӨЖ ОРЫНДАУ БОЙЫНША ӘДІСТЕМЕЛІК НҰСҚАУ
ОСӨЖ бойынша тапсырмаларды орындау және тапсыру графигі

Студенттің оқытушы басқаруымен орындайтын өздік жұмыстарының құрылымы

СОӨЖ №1. HTML тілі.
Өзіңіз білетіндей, web-беттер HTML (HyperText Markup Language, гипертекстік ақпаратты белгі тілі) деп аталатын арнайы тілдерде жазылады. HTML тілін 1989 жылы Тим Бернес-Ли ұсынған. Бұл web ортасында гипертекстік құжаттарды құруға арналған стандартты тілі болып табылады. HTML құжаттары web браузерлердің түрлі типетрімен қарастыруға және кезкелген тесттік редактордың немесе мамандандырылған HTML редакторының көмегімен құрылады.
HTML тэгтері.
Кәдімгі текстер HTML құжатында тэгтер (tag - маркер) деп аталатын тілдің конструкциясын қосу жолымен айналады. Тэг - HTML элементі, бұрышты (< >) жақшаларда жазылатын тексті ұсынады. Тэг өзінен кейін ұсынылып тұрған ақпараттарды өзгертетін активті элемент болып саналады. Тэгтің атрибуттары болу мүмкін. Тэгтер, жақшалар сияқты, қостан болады - ашылған <А> тэгіне сәйкесінше жабылатын </А> тэгі болуы керек. HTML - де тэгтер екі категорияға бөлінуі мүмкін:
* құжат денесі тұтасымен web браузерде қалай бейнеленетінін анықтайтын тэгтер;
* тақырыбын немесе құжаттың авторын, құжаттың жалпы қасиетін суреттейтін тэгтер.
HTML тэгтері келесідей бір-бірінен кейін орналасқан элементтерден тұрады:
* сол жақ бұрышты жақша (<);
* міндеті емес қисық сызық (/), бұл кейдір құрылымдарды жабатын соңғы тэг екенін білдіреді;
* тэгтер атауы, мысалы TITLE немесе PRE;
* міндетті емес атрибуттар;
* оң жақ бұрышты жақша (>).
Тэгтер атрибутсыз болуы мүмкін немесе бір немесе бірнееше атрибуттар қосылуымен болады, мысалы:
ALIGN=CENTER.
Ашылатын және жабылатын тэгтер арасында текст немесе басқа тэгтер болуы мүмкін. Мұндай жағдайда екі тэг жіне құжат бөлігі, олардың арасындағы байланыс HTML элементі деп аталатын блокты құрады.
Атрибут спецификасына жататындар:
* Атрибут атауы, мысалы WIDTH;
* Теңдік белгісі (-);
* значение атрибуттің мәні, символдар жолымен қойылатын, мысалы "80".
Атрибут мәнін әрқашан тырнақшаға алған дұрыс, не бірлік (' 80'), не екілік ("80") тырнақша. Тырнақша ішінде тағы да сондай тырнақшалар болмауы керек.
HTML-құжатының құрылымы.
HTML- құжаты келесідей құрылымдардан тұрады:
* HTML-құжатты хабарлау;
* тақырып;
* құжат денесі;
* комментарийлер.
Мысалы:

<HTML>
<! -- тақырып басы -->
<HEAD>
<МЕТА HTTP-EQUIV=<<Content-Type>> CONTENT=<<text / html; charset=windows-1251>>>
<МЕТА NAME=<<Попов>> CONTENT=<<HTML web Обучение>>
<META NAME=<<GENERATOR>> CONTENT=<<Notepad>>>
<ТIТLЕ> Web- бетке мысал </TITLE>
</HEAD>

<BODY
TEXT=<<#000000>> BGC0L0R=<<#94F9FA>> BACKGROUND=<<<< LINK=<<#3333FF>> VLINK=<<#3333FF>> LINK=<<#3333FF>> onLoad=<<window.defaultStatus-'Tris HTML is Create by Notepad'<<>
<CENTER>жазылатын текстің мысалы</CENTER>
</BODY>
</HTML> 
HTML- құжатты хабарлау
<HTML> және </HTML> қос тэгі web-шолушыға (браузерге) олардың арасында HTML форматтағы құжатты хабарлайды, құжаттың бірінші тэгі <HTML> (құжаттың ең басында) болуы керек, соңғысы </HTML> (құжаттың соңында). Web-браузер алынған құжатты HTML-құжат сияқты түсіндіріп береді.
Құжаттың тақырыптық бөлімі
<HEAD> және </HEAD> тэгтері құжатты жалпы суреттеуді ұсынады. Ереже бойынша, олардың арасында құжат туралы ақпаратты көрсетуді ұсынады (атаулар, іздеу үшін кілттік сөз, түсіндірме және т.б.). Арнайы спайдер программалар іздеу жүйесінің өз мілңметтер қорын құру үшін құжаттың атауын қолданады. HTML-құжатқа атау беру үшін текст <TITLE> және </TITLE> тэгтер арасында орналасады.
Мысалы:
<HEAD>
<МЕТА HTTP-EQUIV=<<Content-Type>> CONTENT=<<text/html; charset=windows-1251>>>
<META NAME-<<Попов>> CONTENT-<<HTML web Обучение>>>
<META NAME=<<GENERATOR>> CONTENT-<<Notepad>>>
<ТIТLЕ> Web- беттің мысалы</TITLE>
</HEAD>
Кеңес. Техникалық, старттық және аяқтаушы <HTML>, <HEAD> және <BODY> типтегі тэгтер міндетті емес. Бірақ, олады қолдану ұсынылады, бұл web- браузерге құжаттың тақырыптық бөлімнен құжаттың денесінен ажыратуға көмектеседі.
HTML-құжаттың денесі
Құжаттың үшінші басты бөлімі оның денесі болып табылады. Ол тақырыптан кейін тұрады және <BODY> және </BODY> тэгтерінің арасында болады. Олардың біріншісі </HEAD> тэгінен кейін тұру керек, ал екіншісі </HTML> тэгәнәң алдында болуы керек. HTML- құжатының денесі - бұл HTML құралдармен қалыпталған құжаттың меншік ақпараты. Мысалы:
<BODY>
TEXT=<<#000000>> BGCOLOR=<<#94F9FA>> BACKGROUND=<<<< LINK=<<#3333FF>> VLINK=<<#3333FF>> ALINK=<<#3333FF>> onLoad=<<window.defaultStatus='This HTML is Create by Notepad'<<>
<CENTER>пример отцентрированного текста</CENTER>
</BODY>
Комментарии
Басқа тілдер сияқты, HTML құжат денесіне комментарилер қоюға мүмкіндік береді, желі арқылы құжаттар берілгенде сақталады, бірақ браузерде көрінбейді. Комментарий синтаксисі! !-- Бұл комментарий -->, мысалы: . Комментарилер құжаттың кез келген жерінде кездесу мүмкін.
Құжат денесінің тэгтері

Теги тела документа
Теги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.
1-кесте. HTML тэгтерінің қысқаша анықтамалары
Тегтер
Назначение
<HTML>
HTML құжатының басталуы
<HEAD>
Тақырып атауы (тақырып қызметтік және суретті ақпарттан тұрады)
<МЕТА HTTP-EQUIV="Content-Type" CONTENT= "text/html: charset=windows-1251">
<МЕТА NAME="Попов" CONTENT="HTML 06учение">
<МЕТА NAME="GENERATOR" CONTENT="Notepad">
Метатегтер қызметтік ақпараттарды анықтайды. Мұнда бірінші метатэг тексті кодтауды анықтайды, екіншісі авторды және кілттік сөзді хабарлайды, үшіншісі HTML- құжаты қай редакторда жазылғанын хабарлайды.
<ТITLЕ>Web - бетте мысал</ТIТLЕ>
браузер терезесі үшін тақырып
</HEAD>
Тақырып соңы Конец заголовка
<BODY BGCOLOR="#FFFFFF" ТЕХТ="#000000"> ...
HTML- құжат денесінің басталуы
</BODY>
Құжат денесенің соңы
</HTML>
HTML құжатының соңы

2 - кесте. Беті безендіруге арналған негізгі тэгтер
Бетті безендіретін элементтер
HTML кодтары
Параграф, тағы бір параграф
<Р>
Параграф
</Р>
<Р>
Тағы бір параграф
</Р>
Қоюлатылған текст
<STRONG>Қоюлатылған текст</STRONG>
Иілген мәтін
<ЕМ> Иілген мәтін </ЕМ>
Асты сызылған мәтін
<U> Асты сызылған мәтін </U>
Үлкейтілген мөлшердегі мәтін
<BIG> Үлкейтілген мөлшердегі мәтін </BIG>
Кішірейтілген мөлшердегі мәтін
<SMALL> Кішірейтілген мөлшердегі мәтін </SMALL>
Басқа түсті мәтін
<FONT COLOR="#FF0000">
Басқа түсті мәтін
</FONT> (#FF0000 - Бұл түстің оналтылық коды)
Басқа шрифті мәтін
<FONT FACE="COURIER">
Басқа шрифті мәтін
</FONT> (COURIER - шрифт атауы)
Мәтіндік параграфты түзету
<Р ALIGN="LEFT">
Текстік параграфтың солға түзету </Р> (ALIGN параметрі параграфқа түзетулер беріледі. LEFT - солға, RIGHT - оңға, CENTER - ортаға)
Анықталған параграфтың үлкейтілген текст жылжуы
<BLOCKQUOTE>
... <Р>Увеличенный отступ</Р>
</BLOCKQUOTE>
Номірленген жол тізімі
<OL>
... .<li>алынған тізім</li>
... .<li>нөмірленген</li>
... .<li>жол</li>
</ol>
Жол тізімі, нүктеден басталатын
<ul>....<LI>Тізім</LI>...<LI>Жол</LI>...<LI>Басталатын</LI>...<LI>Нүкте</LI> </UL>
ВРЦИО - ға гиперсілтеме
<А HREF-"http://vrn.fio.гu">Гиперссылка на ВРЦИО</а>(<а> және </а> арасында кезкелген тексттер және суреттер болуы мүмкін, мұның барлығы гиперсілтеме болады)
Жаңа параграфсыз келесі жолға көшу
өту<BR>келесі жолға< BR>
бастапқысыз< BR > жаңа параграф
тексті бөлуге арналған горизонтальді сызық
<Р>Горизонтальді сызық </Р><HR><Р>бөлу үшін </Р>
Қатарынан көп бос жэолдар (бір бос орыннан асатын)
Көп&NBSP:&NB5P: бос орындар(Егер мұндай кодты символды тура қоюға болмайтын HTML - де символдар осылай кодталады.)

<IMG SRC="PICTURE.GIF" WIQTH="262" HEIGHT="100" ALT='' Бұл картинкаға жазба">
SRC параметрі файлға суреті қояды. WIDTH және HEIGHT параметрлері суреттің ұзындығы мен биіктігін береді.Басқа өлшемді сурет масштабталған болып шығады. Егер WIDTH және HEIGHT берілмесе, браузер өзі өлшемін анықтайды. Сурет жүктелмей тұрған кезде ALT тексті шығарады.

<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD WIDTH="50%">1 ұяшық</TD>
<TD WIDTH="50%"> 2 ұяшық</TD>
</TR>
<TR>
<TD WIDTH="50%">3 ұяшық </TD>
<TD WIDTH="50%">4 ұяшық </TD>
</TR>
</TABLE>
100% -- пайызбен берілген кесте өлшемі, 50% -- кестеге байланысты ұяшық ұзындығы

<table border="l" width="100%><tr><td width="66%" соlsраn="2"> l ұяшық </td><td width="34%"> 2 ұяшық </td></tr><tr><td width="33%"> 3 ұяшық </td><td width="33%"> 4 ұяшық </td>
<td width="34%"rowspan-"2"> 5 ұяшық </td>
</tr>
<tr>
<td width="33%"> 6 ұяшық </td>
<td width="33%"> 7 ұяшық </td>
</tr>
</table> (colspan және rowspan -- ұяшықта бірнеше аралас жол немесе кесте бағандарынан тұратынын көрсетеді)

<table border="4" width="70%" cellpadding="3">
<tr>
<td width="50%" bgcolor="#FFFF80">fl4eiiKa l</td>
<td width="50%" > 2 ұяшық </td>
</tr>
<tr>
<td width="50%" > 3 ұяшық </td>
<td width="50%" > 4 ұяшық </td>
</tr>
</table> Мұнда тағы бірнеше параметрлер ұяшықтар мен барлық тұтас кесте үшін берілген. (бірінші ұяшық түсі , бордюр қалыңдығы)
ЕСКЕРТУ. Өлшемдер абсолютті өлшемде (пиксель) не салыстырмалы өлшемде (процент) көрсетілуі мүмкін. <<50>> жазба өлшемі 50 пиксельді, ал <<50%>> жазба - 50% осы жағдайда ең үлкен өлшемді екенін көрсетуде
Түстер көбіне RGB (қызыл, жасыл, көк) форматта кодталады. Бұның жазылуы <<#RRGGBB>> осылай болады, мұнда RR - қызыл он алтылық мәнді құрам, GG - жасыл, ал ВВ - көк. 00 - жарықтың жоқтығын білдіреді, ал ҒҒ - максималды жарық.
Оналтылық санау жүйесі дегеніміз - сандарды жазуға 16 символ қолданады: 0, 1, 2, 3,4, 5, 6, 7,8, 9, А, В, С, D, E, F. Мұндай жағдайда ҒҒ саны - ондық сан 256 сәйкес келеді. Мына мысалда осындай жолмен кодтталған түстер келтірілген:
#000000 #FFFFFF #FFOOOO #FFFFOO #408080
Қара Ақ Қызыл Сары Бирюзовый

СОӨЖ №2. Web - беттерді құру.

WWW негізгі элементі web-бет - бұл әртүрлі арнайы маркерлі тегті текст, ол материалдың сыртқы түрі мен олардың басқа беттермен байналысын қамтамассыз етеді. Барлық web-беттер арнайы HTML - тілінде жазылады. Қазіргі кезде WWW технологиясы пайдаланушыға web-беттерді мүмкіндік береді.
Мәтінге қосымша графиктер, дыбыстар, анимациялар және басқада арнайы эффектілер орнатуға болады. Жеке беттер басқа беттермен қосымша ақпарат алуға қамтамассыз ете отырып байланысады. Бұл ақпараттар физикалық тасымалдайтын, интернеттен оның протоколының көмегімен беріледі.
Web-беттің жинақтылығы және олардың гиперсілтеме арқылы байланысуы web-түйіндер немесе web-сайттар деп аталады. Web-сайттар web-сервердің белгілі бір бумасында орналасады. Web-сервердің кең таралған екі типі бар: Unix (немесе Linex) платформасында - қарапайым Apache сервері, Windows NT немесе Windows 2000 платформасында - US сервер (Internet Information Server). Гипермәтіндік материалдардың серверде орналасуы Web - публикация деп аталады.
Web-сайт бастапқы беттен тұрады - ол сайтқа кірерде web-браузерді ашады: мысалы, http://vrn.fio.ru адресі бойынша lndex.html (Unix) немесе default.html (windows) бетін жүктеу керек болса. Web-беттерді көру кезінде арнайы мамандандырылған құралдар қолданылады, олар Web-браузерлер деп аталады.
WWW маңызды ерекшелігі болып оның үлкен қарқынмен өсуі табылады. Кез келген мыңдаған адамдар мен мыңдаған компаниялардың өз сайттары бар. Әр адам өз визиткалық карточкаларында электрондық почтаның адресі көрсетіледі.
Web-сайтты өңдеу процесі.
Қазіргі кезде Интернетке кірсеңіз, көптеген дайын сайттарды табуға болады, олар тез жүктеледі, олардың шектелген бөлімдерінде өз ақпараттары және новигациялық ыңғайлы функциялары бар.
Ақпартаттық ағынның жоспарлануы.
Көптеген Web-мастерлер ақпартаттық ағынды құруға уақыт бөлмейді, бетте мәтінді және бейнелерді орналастыруды ұйымдастырады. Бірақта көптеген сайттарда
Өз сайтыңызды қызықты болсын десеңіз, ақпараттар ағынын визуациялап, пайдаланушының таңдаған жолын білуіңіз қажет.
Қалай жақсы сайт құруға болады?
Ең жақсы web - сайт - ол көрнекті, негізгі ойды көрсететін және пайдаланушыны ақпарат алуда көп күтуді талап ететін болуы керек. Ондай сайт құру үшін қажетті кеңестер:
өз сайтыңыздың атауын анықтап беріңіз. Сайттың мақсаты мүмкін болғанша нақты болуы керек. Өз компанияның өнімдерін, сайтта беріңіз келді делік. Бұл жақсы бірақ сіз ол өнімдерді қалай жарнамалайтыныңызды ойлану керек. Оның ең дұрысы - мақсаттың нақты болуы.
Міндетті түрде өз аудиторияныз туралы ойланыңыз. Кімдер сіздің сайттың негізгі (немесе қосымша) қолданушысы болады? Олар қандай жас шамасында? Немен айналысады? Сіздің сайтыңызда қанша уақытын өткізді?
Тез жүктелетін әлемді қолданыңыз. Адамдардың сайттан тез шығуының негізгі себебі - ақпараттың ұзақ жүктелуі болып табылады. Графикалық файлдардың үлкен көлемдісі сайтта қалу stop батырмасын басып, жүктеуді тоқтатады.
Өз сайтыныңды визуалды түрде қызықты қылып құрыңыз. Сіз интернеттен қызықсыз сайттарды кездестірген шығарсыз. Оларды неге қызықсыз қылады? Мүмкін түспен мәтіннің біртүстілігі, тақырып шығар. Барлық мәліметтерді бір бетке орналастыруға тырыспаңыз. өз бетіңізді көп ақпаратпен толтырмаңыз. Сіздің бетіңізді оқитындарды ойлаңыз. Бос кеңістікті сайттың бетін қосуға тырысыңыз. Бетте графикаларды орналастыруда, оның не үшін тұрғанын біліңіз. өз мақсатыңыз үшін бе, әлде жай сәндік үшін бе? Кез келген web - сайт жақсы көрінуі және маңызды ақпараттармен толтырылып, көруге ыңғайлы болуы керек. Мазмұнын дұрыс ұйымдастырыңыз. Егер сіздің пайдаланушының көруі қажет деген ақпараттар бар болса, онда оны сайттың түкпіріне жасырмаңыз. Ондай ақпараттарды жеңіл көруге болатындай етіңіз. Бірақ, сайттың бір деңгейде болмауын қадағалаңыз.

СОӨЖ №3. Microsoft ProntPage программасы. Web - түйіннің құрылымын өңдеу. Web - беттерді редактрлеу.

Microsoft FrontPage жүктеңіз, ол бас мәзірден Программы ► Microsoft FrontPage командасын орындайсыз:
Web- түйін структурасын құру үшін Файл ► Новый ► Страница командасын орыңдайсыз немесе web - диалогтық терезесінен жаңа бет немесе web Пустой Web-узел таңдайсыз.
Web - сайт шаблондар терезесінен (Web Site Templates) шаблон таңдайсыз, мысалы, дербес бет (Personal Web), жаңа сайттың жерін көрсетіңіз жолына (Specify the location of the new web) диск немесе бума атауын еңгзіңіз, web - түйіннің көмегімен құрылған бума мен файлды орналастыру үшін. Мысалы D:\home\mywebs. ОК батырмасын басыңыз.
Нәтижесінде терезенің солжақ жартысында web - түйіннің тізімі Бума тізімі (Folder List) ашылады, онда автоматты түрде _private және images бумалары құрылады және таңдалған шаблон базалық мазмұнымен бірнеше HTML беті ашылады. (9-суретті қараңыз).
Құрылған түйін жаңа бумада сақталады, локальді дискде немесе Web-серверде орналасады. Бұл түйінді Файл ►Открыть (File ► Open Web...) командасы арқылы ашуға болады немесе соңғы ашылған тізімнен Файл ► Недавно использованные файлы (File ► Recent Files) ашуға болады.
Web - түйіннің базалық құрылымын
Web-түйіннің базалық құрылымын жеке бетте ұсынылған шаблонмен көру. Web- түйіннің құрылымын бейнелеу үшін Вид панелінен На - вигация (Navigation) белгісін шертіңіз. Терезенің оң жақ бөлімінде web- түйіннің құрылымы шығады (2 - сурет). Мұнда сілтеменің дұрыстығын тексереміз, олардың файлдың атауын өзгеркенде автоматты түрде өзгереді.

2 - сурет. web- түйіннің құрылымының өзгеруі
Web - түйіннен myfav3.htm бетін өшіріңіз, ол үшін web - түйін құрылымында осы элементті тышқанның оң жақ батырмасымен белгілеп жанама менюден Удаление (Delete) командасын таңдау арқылы өшіреміз (10 - суретті қараңыз). Ашылған өшіру терезесінен Удалить эту страницу из сайта (Delete this page from the Web) жалаушасын белгілейміз және Да (OK) батырмасын шертеміз.
СОВЕТ. Егер терезе құрылымында Навигация саймандар тақтасы болмаса, онда Просмотр (View) мәзірінен Панели Инструментов ► Навигация (Тoolbars ► Navigation)) командасын таңдаймыз.
Егер альбомды белгілеуден құрылымынң барлық элементі сызғыш арқылы көрінбесе, Навигация саймандар тақтасынан Портрет/Ландшафт (Portrait/Landscape) батырмасын шертеміз.
Web - түйін құрылымының элементтер байланысын және орналасу байланысын өзгерту үшін элементті Навигация режиміне керекті жерге қоямыз, 3 - суреттк көрсетілгендей болады:

3 - сурет. Web - түйін құрылымы эленеттер байланысы және
Изменение взаимного расположения и связей элементов структуры web-узла
Өзгертілген құрылыммен web - түйіннің web - бетінің мазмұнын толтырыңыз. Web - бетті редакторлеу үшін Список папок панеліндегі оның атауына тышқанның сол жақ батырмасын екі рет шерту керек немесе навигация панелінен оның белгісі атауын шертеміз. Редактрлеу терезесінен үлгіні үлкейту үшін стандартты панелдер тақтасынан Бума тізімі (Folder List) батырмасын шертеміз көрсетілген файл тізімін алып тастыңыз.
Назар аударыңыз. FrontPage редакторі Microsoft Office үшін стандартты тәсілдермен қате операцияны - стандартты панелдер тақтасынан Отменить (Undo) батырмасын шертеміз немесе CtrL+Z пенесін басамыз.

7. index.htm стандартты web - бетін редакторлеу үшін ашайық. Нормальный режимінде index.htm бетін мұқият қараңыз. Ол бет тақырыбы, тақырып астындағы батырма сияқты навигация панелінен, беттің сол жақ бөлігінде гиперсілтеме сияқты навигация панелінен (Interests, Favo - rites) және беттің оң жақ бөлігінде текстен тұрады.
Беттің негізгі қасиетін орнату. Ол үшін Файл (File) мәзірінен Свойства (Properties) командасын таңдаңыз. Страница свойств (Page Properties) терезесінен Главное (General) қаттамасына өту керек. Название (Title) жолына құжаттың атауын орыс тілінде еңгізіңіз, мысалы, Персональная страница. Орыс тілінің символдарын дұрыс бейнелеу үшін Язык (Language) (4 - сурет) қаттамасынан Отметить текущий документ (Mark current document as) жол тізімінен Русский (Russian) таңдаймыз, ал Кодировка HTML (HTML encoding) облысынан Сохранить документ (Save the document as) жол тізімінен Кириллица (Cyrillic) таңдаймыз, Перезагрузить текущий (Reload the current document) жол өрісінен Кириллица (Cyrillic) таңдаймыз және ОК батырмасын шертеміз.

4 - сурет. web- беттің қасиетін анықтау.
Web - беттің элементін өзгерту үшін шаблон элементін көрсетіңіз және оны өз қалауыңыз бойынша редакторлеңіз. Беттің баннерін редакторлеу үшін баннерді көрсертіп жанама менюді шақырып және одан Изменение свойств баннера Web-страницы (Page Banner Properties) командасын таңдаңыз, 5 - суретте көрсетілгендей.
Свойства баннера страницы (Page Banner Properties) диалогты терезесінде Изображение (Picture) жалауша қойыңыз, ал Текст баннера страницы (Page banner text) жолына жаңа текст нңгіземіз, мысалы менің дербес бетім, және Да (О К) батырмасын шертеміз. Баннер текст і өзгерді.

5 - сурет.Web - бетте баннер қасиетін өзгерту.
Берілген беттегі навигация жолын белгілеп, навигация жолын өшіру үшін Delete батырмасын басыңыз немесе жанама мәзірден Cut (Вырезать) командасын таңдаймыз.
Беттің оң жақ бөлігіндегі тексті редактрлеңіз (Welcome to my...), мысалы, келесі жолмен: Жеке бет шаблонымен құрылған, осы сайт web - түйінді редакторлеу мысалы ретінде дайындалған. Соңғы өзгертулер еңгізілді.
Кеңес. Редакторлеу үшін жанама меню ыңғайлы құрал бола алады, тышқан көрсеткен редакторленетін объектті тышқанның оң жақ батырмасын басып және объектті операциясы үшін командаларды ұстау.
Бетті жаңалай күн форматын өзгерту үшін күн объектісін көрсетіңіз және жанама мәзірден Свойства даты и времени (Date and Time Properties) командасын таңдау арқылы. Күн және уақыт терезесінен күн форматын өзгертіңіз, 6 - суретте көрсетілгендей, ОК батырмасын шертіңіз.

6 - сурет. Күн типі объектісінің қасиетін өзгерту.
Web - беттің сол жақ бөлігінде гиперсілтеме түрінде навигация панелінің қасиетін өзгерту үшін (Interests, Favorites) панелдегі элементті белгілеңіз және жанама мәзірден Свойства Панели Навигации (Link Bar Properties) командасын таңдаңыз. Общие (General) қаттамасынадағы Свойства Панели Навигации терезесінде ауыстырып қосқыш Детский уровень (Child Level) орнатыңыз, Стиль (Style) қаттамасынан Выберите стиль (Choose a style) тізімінен қажетті стилді таңдап, Ориентация и внешний вид (Orientation And Appearance) бөлімнен Вертикальный (Ver - tical) ауыстырып - қосқышын орнатыңыз, Использовать активную графику (Use Active Graphics) жалаушасын орнатыңыз және Да (ОК) батырмасын шертіңіз. Бұдан кейін web - беттің сол жақ бөлігінде текст гиперсілтемемен вертикалды орналасқан батырмалар түрінде орналасады.
Навигация режиміне ауысыңыз және Interests web-бетін Интересы деп ауыстырыңыз, ал Favorites Извранное деп ауыстырамыз. Навигация режиміне өту үшін Виды панелінде Навигация белгісін шертеміз. Web - беттің атауын өзгерту үшін бетті көрсетіп жанама мәзірден Переименовать (Rename) командасын таңдаңыз және беттің жаңа атауын еңгізіңіз.
Ескерту. Web - беттің атауын өзгерткен кезде, өзі сақталған файл атауы өзгермейді.
Web - түйіннің бастапқы бетін редакторлеуге көшіңіз және беттің сол жақ бөлігіндегі навигация батырмасының жазбалары өзгергеніне көз жеткізіңіз. 7 - суретте көрсетілген:

7 - сурет. FrontPage 2002 редактор терезесінде web - беттің түрі.
Батырмадағы гиперсілтеменің жұмысын тексеру үшін оны тышқанмен шертіп Ctrl пернесін басыңыз. FrontPage редактор терезесінде web - беті ашылады. Осы батырмадан сілтеме басқарылады.
Web - беттің түрін көру үшін web - өзгерткіште Просмотр (Preview) белгісін шертеміз. HTML белгісін басқан кезде берілген web - беттің тексті HTML тілінде қалай жазылғанын көре аласыз.
Өзіңіз құрған web - бетті түрін бағалау үшін басқа web өзгерткіштерде Файл (File) мәзірінен Просмотр в Браузере (Preview In Browser) командасын таңдаңыз. Ашылған диалогты терезеден Просмотр в Браузере (Preview In Browser) браузерді таңдаңыз, 8- суретте көрсетілгендей, экран кеңейтілуін көрсетіңіз және Просмотр (Preview) батырмасын шертіңіз.

8 - сурет. web- бетті көру үшін web - өзгерткішті таңду.
Өзгерткіш терезесінде беттің графикалық элементтерін және текстің бейнелеуінің дұрыстығын гиперсілтеме жұмысын тексеріңіз. Тексеріп болғаннан кейін браузер терезесін стандартты тәсілмен жабыңыз.
Web - бетті форматтауды аяқтаған соң, оны жабыңыз. Web - бетті сақтау үшін Файл (File) мәзірінен Сохранить (Save)командасын таңдаңыз немесе егер файл атауын өзгерткіңіз келсе, Сохранить как (Save as) командасын таңдаңыз. Сохранить как терезесіне бума, файл атауын еңгізіңіз, Тип файла (Save as type) жолынан Страницы Web (Web Pages) типін таңдаңыз және Сохранить (Save) батрымасын шертіңіз.
Құрылған web - түйіннің сақталған өзгертулерімен Microsoft FrontPage терезесін жабыңыз.

СОӨЖ №4. Microsoft ProntPage бағдарламасы. Web - беттерді суреттер, кестелер, гиперсілтеме қою арқылы өңдеу.

1. Microsoft FrontPage-ді іске қосыңыз және бұрын құрылған web-түйінді ашыңыз, олүшін Файл ► Ашу (File ► Open) командасын орындаңыз, Файлды ашу терезесінен (Open File) Mywebs папкасын таңдаңыз, онда web-түйіннің папкалары мен файлдары сақталған, index.htm файлын көрсетіңіз және Ашу (Open) батырмасын басыңыз немесе Файл ► Жақында қолданылған файлдар (File ► Recent Files) командасын орындаңыздар және web-түйін бетіндегі ағымдағы файлдардың ішінен -- index.htm файлын таңдаңыз..
2. FrontPage терезесінен Папкалар (Folders) белгісін шертіңіз, ол Виды (Views) панелінде орналасқан. Папкалар панелінен өзіңіз жұмыс жасайтын бетті таңдаңыз, мысалы, interest.htm, және оны редактрлеу үшін ашыңыз, ол үшін тышқанның сол жақ батырмасын екі рет шертіңіз.
3. Берілген беттегі текстті қайта өңдеңіз, мысалы, Here is a good place to describe a list of your hobbies, projects or interests текстін өшіріңіз. Interest 1 Provide a description, picture, or perhaps a hyperlink here текстінің орнына өзіңізді қызықтыратын нәрселер туралы жазыңыз, мысалы: Маған автобуспен жүрген, оны күту, тазалау ұнайды. Автобустар туралы қызықты мәліметтерді мен <<Автомобили в России>> сайтынан таптым.
4. Interest 1 сөзінің орнына автомобильдің суретін қойыңыз, ол үшін сурет тұратын орынды көрсетіп, Вставка (Insert) менюінен Изображение ►Из файла (Picture ► From File) командасын таңдаңыз. Посмотреть в (Look in) өрісінен папканы немесе суретті таңдағаннан кейін Вставить (Insert) батырмасын басыңыз..
5. Бейненің қасиеттерін өзгерткіңіз келсе, қажетті суретте тышқанның оң жақ батырмасы арқылы контекстік менюден Свойства изобра - жения (Picture Properties) таңдаңыз, ашылған терезедегі Основные (General) қосымшасын таңдаңыз. Альтернативные представления (Alternative representations) аймағындағы Текст өрісіне Автомобильдер сөзін жазыңыз. Внешний вид (Appearance) қосымшасын ашыңыз, Толщина границ (Border thickness) өрісінде 1 орнатыңыз, Горизон - тальное Расстояние (Horizontal spacing) и Вертикальное Расстояние (Vertical spa - cing) өрістерінде 2 орнатыңыз. Өзгерістерді енгізу үшін ОК батырмасын шертіңіз.
6. Автомобили в России сөзіне абсолютті гтперсілтеме құрыңыз, ол үшін оны белгілеп алып, стандартты құралдар панелінен Гиперссылка батырмасын басыңыз. Вставка гиперссылки терезесіндегі Address.: (Адрес) өрісіне web-беттің адресін жазыңыз немесе, ссылки на интернет-ресурс батырмасында тышқанды шертіңіз, бұл бетті Интернеттен тауып алаңыз, белгілеңіз және оның адресін жаттап алыңыз. web-шолушы терезесін жауып, Интернеттен табылған беттің адресін Address: http://www.auto.ru өрісінде орналастырыңыз, ол 9-суретте көрсетілген. Сілтемені ОК батырмасын басу арқылы аяқтаңыз.

9-сурет. Гиперсілтемені редактрлеу терезесі

Аналогты түрде interest.htm бетіндегі Interest 2 Provide a description, picture, or perhaps a hy - perlink here текстін балық аулаумен айнылысатыныңыз туралы текстпен ауыстырыңыз, файлдан сәйкес суретті таңдап, өз пошта адресініңде гиперсілтеме құрыңыз.
Виды (Views) панелінен Гиперссылки (Hyperlinks) белгішесін шертіп, таңдалған беткеқатысты және автоматты түрде Персональная страница (Personal Web) шаблонын қолдана отырып құрылған сілтемелердің барлығын қараңыз.
Таңдап алынған файлдың атын өзгерту үшін, мысалы, photo.htm, қажетті файлда тышқанның оң жақ батырмасы арқылы контекстік менюден Свойства изобра - жения (Picture Properties) таңдаңыз, ашылған терезедегі Основные (General) қосымшасын таңдаңыз. Осындағы Название (Title) өрісінде құжаттың атауын Фотоальбом атауымен өзгертіңіз. Көрсетілімнің аяқталуы мен өзгертудің енгізілуі үшін При - менить (Apply) батырмасын басыңыз және Свойства изображения терезесін ОК батырмасын шерту арқылы жабыңыз.
7. web-түйіннің навигациялық құрылымының көсетілуін қамтамасыз етіңіз және photo.htm файлындағы сілтеменің атын Фотоальбом-ға өзгертіңіз, ол үшін қажетті сілтемені көрсетіп, контекстік менюден Переименовать (Rename) командасын таңдыңыз, содан кейін атауын қайта редактрлеңіз.
8. Мәліметтерді бетте көрсетілуін ұйымдастыруда кесте ыңғайлы болып келеді. Олар көп жағдайда тексті форматтауды және графикалық бейнелерді орналастыруды жеңілдетуге көмектеседі. Сондай-ақ, кестелер беттердің біркелкілігін қамтамасыз етеді. FrontPage редакторында кестені не өз бетіңізбен бетте салу арқылы, не Таблица (Table) менюін пайдаланып құруыңызға болады.
Кесте қою үшін кесте қоятын орынды көрсетіңіз және Таб - лица ► Вставка ► Таблица (Table ► Insert ►Table) командасын орындаңыз. Вставить таблицу (Insert Table) терезесіндегі Размер (Size) облысында жол санын (Rows) 2, баған санын (Columns) 3, Размещение (Layout) облысындағы Размер (Border Size) өріске 0 орнатыңыз және Да (ОК) батырмасында кесте құрылу үшін басыңыз.
Фото қою үшін кесте ұяшығын көрсетіңіз, одан кейін Вставка ► Изображение ► Из файла (Insert ► Picture ► From File) таңдаңыз, Изображение (Pic - ture) терезесінде папка немесе бурет файлын таңдаңыз. Вставить батырмасын шертіңіз.
9. Установите на странице photo.htm панель навигации с кнопкой Вверх (Up) для возврата на родительскую страницу interest.htm. Чтобы эта кнопка отображалась только на странице photo.htm, установите курсор в середине этой страницы и выберите в меню Вставка (Insert) команду Web компонент (Web Component).
Вставка Web-компонента (Insert Web Component) диалогтық терезесінде Панели ссылок (Link Bars) таңдаңыз, Выбрать панель типов (Choose a bar Type) өріс тізімінен Панель с пользовательскими ссылками (Bar with custom links) таңдаңыз. Далее (Next) батырмасын басыңыз. Навигация панелінен қажетті батырма стилін, сонан кейін орентацияны, мысалы, горизонтальды таңдап, Готово (Finish) батырмасын шертіңіз. Пайда болған После этого в окне Создание но - вой панели навигации (Create New Link Bar) терезесінде құрылған панельдің атын енгізіңіз және ОК батырмасын басыңыз.
Свойства панели навигации (Link Bar Properties) терезесінде Доба - вить (Add link) батырмасын басып, web-беттің атауын беріңіз, ол құрылған батырманы басқан кезде көшуді қамтамасыз етеді, мысалы, interest.htm, Родительская страница (Parent Page) жалауша орнатыңыз және ОК батырмасын шертіңіз.
10. Аналогты түрде, беттің сол жақ бөлігінде навигация облысында Домой (Ноmе) батырмасын орналастырыңыз, ол берілген web-түйіндегі барлық беттердің басқарылуын стандартты (үй) index.htm бетіне беруге көмектеседі.

10-сурет. photo.htm бетінің кестемен берілген түрі
11. photo.htm бетін FrontPage стандартты құралдар панеліндегі Сақтау (Save) батырмасын басу арқылы сақтаңыз. Бетті көру үшін Просмотр (Preview) режиміне ауысыңыз, ол 10-суретте көрсетілген.
12. Интернет ресурсындағы web-бетте Таңдалған сілтемелер тізіміін тізім түрінде тіркеңіз. Избранное web-бетті редактрлеуге көшу үшін Папки (Folders) белгішесінде тышқанды шертіңіз, web-түйіннің берілгендерін шығарыңыз және favorite.htm файлын шертіңіз. Осыдан кейін FrontPage редакторында берілген бет редактрлеуге дайын болады. Бұл беттегі керек емес тексті өшіріп тастаңыз да, өз текстіңізді енгізіңіз, мысалы: Берілген бетте мен мені қызықтыратын Интернеттегі сілтемелерді жинаймын: Федерация Интернет Образования, Московский учебный центр ФИО, Воронежский региональный центр ФИО, Поколение.ru.
Федерация Интернет Образования, Московский учебный центр ФИО, Воронежский региональный центр ФИО, Поколение.ru текстін тізім түрінде тіркеңіз, ол үшін берілген тексті белгіліңіз де, форматтау құралдар панелінен Список (Bullets) батырмасын таңдаңыз. Егер тізімнің қасиеттерін өзгерткіңіз келсе, оны белгілеп, контекстік менюден Свойства списка (List Properties) командасын орындаңызда, өзіңізге қажетті өзгертулерді енгізіңіз, болғаннан соң Да батырмасын шертіңіз.
Құрылған тізім элементтеріне гиперсілиеме құрыңыз: Федерация Интернет Обра - зования -- http://www.fio.ru, Московский учебный центр ФИО -- http://center.fio.ru, Воронежский региональный центр ФИО -- http://vrn.fio.ru, Поколение.ru -- http:// www.pokoleniye.ru.
Гиперсілтеме құру үшін тізімнен қажетті элемент текстін белгілеп алып, мысалы, Федера - ция Интернет Образования, контекстік менюден Гиперссылка (Hyperlink) командасын таңдаңыз, сонан кейін Вставить гиперссылку (Create Hyperlink) терезесіндегі Address: өрісіне http://www.fiо.ru енгізіңіз және Да батырмасын басыңыз.
Болған өзгертулерді Файл ► Сақтау (File ► Save) таңдау арқылы сақтаңыз. Web-бетті көру үшін Просмотр (Preview) режиміне ауысыңыз. HTML белгішесін басу арқылы берілген web-беттің HTML тілінде қалай жазылғанын көріңіз.
Көру аяқталған соң FrontPage терезесін стандартты тәсілмен жабыңыз.

СОӨЖ №5. Web - беттерді өңдеу.
Microsoft FrontPage-ді іске қосыңыз және бұрын құрылған web-түйінді ашыңыз, олүшін Файл ► Ашу (File ► Open) командасын орындаңыз, Файлды ашу терезесінен (Open File) Mywebs папкасын таңдаңыз, онда web-түйіннің папкалары мен файлдары сақталған, index.htm файлын көрсетіңіз және Ашу (Open) батырмасын басыңыз немесе Файл ► Жақында қолданылған файлдар (File ► Recent Files) командасын орындаңыздар және web-түйін бетіндегі ағымдағы файлдардың ішінен -- index.htm файлын таңдаңыз.
FrontPage терезесінен Папкалар (Folders) белгісін шертіңіз, ол Виды (Views) панелінде орналасқан. Папкалар панелінен өзіңіз жұмыс жасайтын бетті таңдаңыз, мысалы, interest.htm, және оны редактрлеу үшін ашыңыз, ол үшін тышқанның сол жақ батырмасын екі рет шертіңіз.
1 қадам. Басқа бетке гиперсілтемелі қозғалмалы батырма құру.
Қозғалмалы батырма -- бұл гиперсілтеме қажет болғанда тышқан қозғалысын сезіне алатын батырма. Тапсырманы орындау үшін Вставка (Insert) менюінен Компонент ► Парящая кнопка (Component ► Hover Button) командасын орындаймыз.Hover Button терезесінде батырманың қосымша мүмкіндіктерін қамтамасыз ететін параметрлер қатары бар.
Вверх (Up) батырмасын өшіріңіз, ол беріген бетте бұрын құрылған. Қозғалмалы батырманы құру үшін меңзерді pho - to.htm web-беттегі мәтіннің соңына орналастырыңыз және Вставка ► Web-компонент командасын орындаңыз. Вставка Web-компо - нент терезесіндегі компоненттер тізімінен Динамические эффекты (Dinamic effects) таңдаңыз, сонан соң эффекттер тізімінен Hover Button таңдаңыз және Готово (Finish) батырмасын басыңыз.
Реквизиты парящей кнопки (Hover Button Properties) терезесіндегі Текст кнопки (Button text) өрісіне Назад енгізіңіз. Связь с (Link to) өрісінде web-беттің атын беру үшін, құрылған батырманы басуға көшу үшін Обзор (Browse) батырмасын шертіңіз, Выбор гиперссылки парящей кнопки (Select Hover Button Hyperlink) терезесінен web-беттің папкалары мен файлдарын таңдаңыз, қазіргі жағдайда interest.htm, Да батырмасын басыңыз. Эффект (Effect) өрісінің тізімінен Инверсия освещения (Reverse glow) нұсқасын таңдаңыз және батырманың құрылуының аяқталғанын көрсету үшін Да батырмасын шертіңіз.
Бетті сақтаңыз және құрылған батырманы көру үшін Просмотр (Preview) режиміне ауысыңыз.
Құрылған батырманың қасиеттерін өзгерту үшін Нормальный (Nor - mal) режиміне ауысып, батырманы белгілеп, контекстік менюден Свойства паря - щей кнопки (Hover Button Properties) командасын орындаңыз. Свойства парящей кнопки (Hover Button Properties) терезесіндегі Эффект (Effect) өрісінен Заполнение цветом (Color fill) таңдаңыз. Настроить (Custom) батырмасын басу арқылы Настройка (Custom) терезесін ашыңыз. Обзор (Browse) батырмасын шерту арқылы Выберите рисунок (Select Picture) терезесін ашып, Кнопка (Button) өрісінде батырманың сурет файлын таңдаңыз. Да батырмасын шерту арқылы батырма өзгерістерін аяқтаңыз. Бетті сақтаңыз және құрылған батырманы көру үшін Просмотр (Preview) режиміне ауысыңыз.
2 қадам. Жүгіртпе жол құру.
Жүгіртпе жол -- сіздің ережелеріңіз бойынша қозғалатын мәтін бөлігі.
бегущей строки құру үшін web-бетте жүгіртпе жолдың орналасатын орнын көрсетіңіз және Вставка ► Web-компонент (Insert ► Web Compo - nent) командасын орындаңыз. Вставка Web-компо - нент терезесіндегі компоненттер тізімінен Динамические эффекты (Dinamic effects) таңдаңыз, сонан кейін эффектілер тізімінен Бегущая строка (Marquee) таңдаңыз және Готово (Finish) батырмасын басыңыз. Реквизиты бегущей строки (Marquee Properties) диалогтық терезесінен Текст (Text) өрісінде мәтінді енгізіңіз және Да батырмасын басыңыз.
3 қадам. Ауыспалы баннердің жүйелілігін құру.
Баннер (от англ. banner -- жарнама тақырыбы) -- келісім немесе ақысы төленгеннен кейін белгілі бір web-серверде орналасатын графикалық элемент. Баннерді дайындау үшін Photoshop редакторының көмегін қолданыңыз. Тізбектелген баннерлердің жүйелілігін көрсету үшін Вставка ► Web-компонент ► Динамические эффекты ► Диспетчер заголовка (Insert ► Web Component ► Dinamic Effects ► Banner Ad Manager) командасы орындалады.
Бірінші бетте ауыспалы баннердің жүйелілігін құрыңыз, онда web-сайтқа гиперсілтеме орналасады, мысалы, Воронежского регионального цент - ра Федерации Интернет Образования http://vrn.fio.ru.
Графикалық редактор көмегімен бірнеше 468x60 өлшемдегі баннерлер дайындаңыз және өзіңіздің web - сайтыңыздағы images папкасына сақтаңыз.
Бірінші бетте ауыспалы баннердің жүйелілігін құру үшін FrontPage редакторындағы index.htm файлын таңдаңыз, беттің жоғары жағынан баннер орналасатын орында белгілеңіз және Вставка менюінен Web-компонент ► Динамические эффекты ► Диспетчер заголовка командасын орындаңыз.
index.htm бетін сақтаңыз және Просмотр (Preview) режиміне құрылған динамикалық баннерді көру үшін көшіңіз. Баннерді басу арқылы гиперсілтемені тексеріңіз.

4 қадам. web-бет анимацияларының элементтері.
FrontPage бет құруда әртүрлі визуалды және дыбыстық динамикалық эффектілерді қолдануға мүмкіндік береді. Ол үшін Формат ► Переход Страницы (Format ► Page Transition) командасын орындаңыз. Динамикалық эффектілерді беттің жеке бөліктеріне де пайдалануға болады. web-беттегі мәтіннің немесе басқа да элементтеріне анимация құру үшін алдымен оны белгілеп алу керек, сонан соң Формат ► Эффекты Динамического HTML (Format ► Dynamic HTML Effects) командасын орындайсыз.
Динамикалық эффектінің әрекеті мына төрт жағдайда орындалады: Тышқанмен бір рет шерткен кезде (Click); тышқанмен екі рет шерткенде (Double click); тышқан меңзерімен көрсеткенде (Mouse over); бетті жүктеген кезде (Page load).
Динамикалық эффектіні құруды аяқтаған соң Эффекты DHTML панелін жабыңыз.

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

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

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

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

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

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

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

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

</div>
</div>
</div>
</footer> <ul id="footbar" class="nav text-center nav-justified" style="z-index: 999;">
<li class="nav-item">
<a class="btn u-btn-outline-yellow btn-lg rounded-0 pull-left" href="search"><i class="fa fa-search"></i></a>
</li>
<li class="nav-item">
</li>
<li class="nav-item pull-right">
<a class="btn u-btn-outline-yellow btn-lg rounded-0 pull-right" href="tapsyrys"><i class="fa fa-bell"></i></a>
</li>
</ul> </main>