- •Физика, математика және ақпараттық технологиялар факультеті Дәрістердің тірек конспектісі
- •050703 «Ақпараттық жүйелер» мамандығының студенттеріне арналған
- •Әдістемелік нұсқаулық
- •050703 «Ақпараттық жүйелер» мамандығының студенттеріне арналған
- •Әк төрағасы _______________ Кишубаева а.Т. Тақырып 1. Web-технологияларының негізгі ұғымдары
- •Статистикалық және динамикалық Web-беттер.
- •Сайтты жоспарлаудың негізгі кезеңдері.
- •Сайттардың базалық құрылымдар.
- •Тақырып 2. Web-технологияларды қолдану орталары
- •Интернеттің клиент-серверлік сәулеті. Uri. Url.
- •Интернетте сайтты жариялау тәсілдері. Хостинг. Сайтты индекстеу. Индекстеу ережелері. Іздестіру машиналар.
- •Сайтты индекстеу.
- •Хостинг
- •Тақырып 3. Web-қосымшаларды жасау технологиялары Тақырып 3.1 Гипермәтінді белгілеу тілдері. Html, dhtml тілдері
- •Html-дің қызметті. Html-дің қысқаша тарихы. Html құжаттың құрылымы. Html элементтері.
- •Гипермәтіндік сілтемелер.
- •Динамикалық мүкіндіктерді жасау құрал-тәсілдері. Dhtml-дің стандартты оқиғалар және әдістер. Визуалдік фильтрлер.
- •Dhtml оқиғаларының тізімі
- •Тақырып 3.2 html -де css қолдану технологиясы
- •Тақырып 3.3 xml тілі
- •Тақырып 3.4 Сценарий тілдері. JavaScript тілі
- •JavaScript-тің қызметі және қолдануы, жалпы мәліметтер. JavaScript-ке байланысты объекттік моделінің ұғымы.
- •Оқиғаларды өндеушілер.
- •Html-бетте кодтың орналысуы. JavaScript-тің url-схемасы. Ауыспалар. Script контейнері. Қасиеттері. Әдістер. Оқиға. Html-құжаттің ішінде кодты орналастыру.
- •Тақырып 3.5 php технологиясы
- •Php операциялары. Php функцииялары.
- •Мультимедиялық Web-бет термині аудио мен видеоклиптерді пайдалануды білдіреді.
- •Аудиоклипті web- бетіне енгізу.
- •Видеоклиптерді енгізу.
- •Анимациялық сурет жасау
- •Қолданылатын әдебиеттер
Dhtml оқиғаларының тізімі
Пернетақта оқиғалары |
|
onkeydown onkeypress onkeyup |
Пернені басу Пернені басу Пернені жіберу |
Тышқан оқиғалары |
|
onclick ondblclick onmouseourt onmousemove onmousedown onmouseup onmouseover |
Элементті шерту Элементті екі рет шерту Тышқан көрсеткішін элементтен алып тастау Тышқан көрсеткішін орын ауыстыру Тышқан батырмасын басу Тышқан батырмасын жіберу Тышқан көрсеткішінің жаңа элементке ауысуы |
Ерекшелеу мен фокусты беру оқиғалары |
|
onfocus
onblur onselectstart onselect ondragstart |
Енгізілетін мәндерді қабылдай алатын элементке фокус бергенде іске асады Элементтің фокусты жоғалтқанда іске асады Бетте ерекшелеу басталғанда іске асады Бетте ерекшелеу аяқталғанда іске асады Ерекшеленген объектілерді сүйреу басында іске асады |
Тақырып 3.2 html -де css қолдану технологиясы
CSS тілі. CSS тілінің құрылымы және ережелері. Стильдердің Ішкі Кестелер. Стильдердің Ауқамды Кестелер. Стильдердің Байланыстырған Кестелер.
Каскадты стиль кестелері (CSS) HTML-құжатын форматтілеудің ең жақсы құралдарының бірі болып табылдады. CSS бүкіл Web-сайтының біртұтас безендірілуіне қол жетуге рұқсат береді. Ол бет мазмұнын оның форматтілеуінен айыруға мүмкіндік береді.
CSS –бұл көлемді және күрделі технология, сондықтан біз тек негізгі жағдайларды қарастырамыз. CSS жайлы көптеген пайдалы ақпаратты Интернете табуға болады.
CSS-ті Web-бетіне енгізу жаңа атрибуттарды енгізгендей оңай.
HTML тілінің спецификациясы HTML-құжаттары үшін не тікелей HTML-құжат ішінде, не сыртқы стиль кестесі арқылы стиль кестелерін бейнелеу ережелерін анықтайды. Стиль кестесін құжатқа енгізу үшін STYLE элементі пайдаланады.
Style блогы script блогына ұқсас. VBScript сценарийлерін style блогінде және керісінше CSS ақпаратын script блогінде орналастыруға болмайды.
Мысал қарастырайық.
<HTML>
<HEAD>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Үй беті </H1>
<P> CSS демонстрациясы
</BODY>
</HTML>
H1 тақырыбының мәтіні көк түспен бейнеленуі үшін біз келесі CSS-ережесін жаздық:
H1 { color: blue }
CSS ережесі екі бөліктен селектор (H1) мен бейнеленуінен (color: blue) тұрады. Бейнелену де өз кезегінде екі бөліктен тұрады: қасиет (color) пен мән (blue).
Максималды иілгіштік үшін бастапқы HTML- құжатының өзгеруінсіз модификацияланатын және бірнеше құжатпен пайдалана алатын сыртқы стиль кестелерін жасау ұсынылады. Сыртқы стиль кестесімен қосылу үшін LINK элементін пайдаланамыз. Мысалы.
<HTML>
<HEAD>
<LINK rel="stylesheet" href="bach.css" type="text/css">
</HEAD>
<BODY>
</BODY>
</HTML>
LINK элементі анықтайды:
Біріктіру түрін: "stylesheet".
"href" атрибуты арқылы стиль кестесінің орналасуын.
біріктірілетін стиль кесте түрін: "text/css".
CSS қолданылуының тағы бір мысалын қарастырайық.
<HTML>
<HEAD>
<STYLE type="text/css">
BODY { color: red }
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1> Үй беті </H1>
<P> CSS демонстрациясы
</BODY>
</HTML>
Стиль кестесі енді екі ережеден тұрады: біріншісі негізгі мәтін элементтерінің қызыл түспен бейнеленуін анықтаса, екіншісі Н1 тақырыбының көк түспен бейнеленуін береді. P элементі үшін түс мәні орнатылмағандықтан, ол ата-аналық элемент түсін, дәлірек негізгі мәтіннен мұраға алады.
Тақырыптың асты сызылу мысалын қарастырайық. Ол үшін CSS атрибутын тақырып тегіне енгізейік.
<H1 style=”text-decoration:underline”>
text-decoration атрибуты оның underline мәнінен қос нүктемен ажыратылады. Тақырып түсін Color атрибутымен өзгертуге болады.
<H1 style=”сolor:red”>
CSS-тің тағы бірнеше атрибуттарын қарастырайық.
<p>Это<span style=”font-weight:bold”> жартылай қалың </span> қаріп</p>
Осылайша:
Italic- курсив
Overline- үстін сызу
Text-transform:uppercase- үстіңгі регистр
Text-transform:lowercase- астыңғы регистр
CSS форматының span тегінде берілетініне назар аударыңыз. Бұл тегті CSS –ті мәтін фрагментіне қолдану керек кезінде пайдаланған ыңғайлы. Span тегі контейнерлі тег болып табылады.
Гиперсілтемені форматтау мысалын қарастырайық. CSS-ті бүкіл құжатқа қолдану үшін Style блогін пайдаланамыз.
<head>
<style>
<!—
a:hover{color:blue}
-->
</style>
</head>
<body>
<h1 style=” text-decoration:underline”>Салем!</h1>
<a href=”http://www.map.com”>Бұл сілтеме</a>
</body>
</html>
Бұл мысалда сілтемеге көрсеткішті апарғанда оның түсі көкке ауысады.
Гиперсілтемелер үшін CSS бірнеше атрибуттары қолданылады.
-a:hover – гиперсілтеме стилі тұтынушы оған көрсеткішті апарғанда өзгереді;
-a:active - гиперсілтеме стилі тұтынушы оны тышқанның сол батырмасымен шерткенде өзгереді;
-a: visited - гиперсілтеме стилі тұтынушы оны пайдаланғанда өзгереді;
-a:link – тұтынушы әлі пайдаланбаған гиперсілтеме стилін анықтайды.
Мысалы.
a:hover{color:blue; text-decoration:overline}
Көк түске үстіңгі сызық қосылды.
Гиперсілтеме мәтіні оған тышқан көрсеткішін апарғанда курсив болып, ал алып тастағанда қалыпты түрде болуын қалауыңыз мүмкін дейік. Келесі процедураны жазыңыз:
Sub link1_onmouseover()
link1_style.fontstyle= “Italic”
End Sub
Қалыпты түрге қалпына келтіру үшін:
Sub link1_onmouseout()
link1_style.fontstyle= “Normal”
End Sub
<A> тегіне ID=link1 атрибутін қосуға ұмытпаңыз.
Осылайша оңай мәтін абзацін де программаланатын объектіге айналдыруға болады. Ол үшін <P> тегіне ID атрибутін енгізу керек.
<P ID=string1> Жай мәтін</P>
Енді мәтін қасиеттерін өзгертуге болады. Мысалы:
String1.style.color= “red”.
Жоғарыда қолданылған мысалдарда Style атрибуті пайдаланған. Бірақ басқа программаланатын атрибуттар көп. Сіз <IMG> тегінде идентификатор жасадыңыз делік:
<IMG ID=image1 SRC= “sky.gif” >
Келесі өңдеушілер тұтынушы бейнеге көрсеткішті апарғанда оны үлкейтеді. Бейне өлшемдері курсорды алып тастағанда қалпына келеді.
Бейне бетке келесі тегпен енгізіледі:
Планетаны атаңыз <IMG SRC= “mars.gif” ID=image1 WIDTH=50>
Оқиға өңдеушілерінің түрі:
Sub image1_onmouseover()
image1.border=3
image1 width=image1.width*2
End Sub
Sub image1_onmouseout()
image1.border=0
image1 width=image1.width/2
End Sub