- •Жаратылыстану және математика факультеті Информатика кафедрасы «Интернетте программалау»
- •2. Пән туралы мәлімет
- •3. «Интернетте программалау» пәнінің жұмыс бағдарламасы– (sillabus)
- •4. Негізгі және қосымша әдебиеттер тізімі, Интернет желісіндегі Web-сайт адрестері
- •«Интернетте программалу» пәнінен тапсырмаларды орындау және тапсыру графигі
- •6. Мәтіндік оқу құралы, авторлық дәрістер
- •Тақырыбы: html тілінің тізім құру тэгтері Туре атрибутының мумкін мәндері.
- •Тақырыбы: Гипермәтіндік сілтемелер
- •Тақырыбы: Кестенің негізгі атрибуттары
- •Бұл мәтін экранға шығады Құжаттың функционалдық бөліктерін анықтау.
- •Тәг атрибуттары.
- •Html командалары.
- •Түсініктемелер.
- •М әтін фрагменттерін логикалық стильмен безендіру
- •Html тілінде тізімдер жасау тәгтері
- •Туре атрибутының мумкін мәндері және олардың нөмірленуі
- •Сырғымалы жолдарды ұйымдастыру
- •Бұл үшінші сырғымалы жол
- •7. Электрондық оқу құралдары
- •8. Практикалық (семинар) сабақтарының жоспары және әдістемелік нұсқаулар
- •Тақырыбы: Сырғымалы жолдар
- •“Ауысу аяқталды” сөзі мәтінде ешқандай белгілеусіз жазылады. Енді pr1.Htm файлында анкерге көшуді анықтау керек:
- •Анкерге ауысуды pr2.Htm құжатының ішінде де орындауға болады, ол үшін құжат ішіне фрагмент қосу жеткілікті:
- •1.Html – құжатқа суреттер қосу
- •Сырғымалы жолдарды ұйымдастыру
- •Width – экрандағы «сырғымалы жолдың» енін пиксель арқылы анықтайтын бүтін сан, оны пайызбен де (%) көрсетуге болады.
- •Бұл бірінші сырғымалы жол
- •Құжат ішінде мәтінді орнгаластыру.
- •Нөмірленбеген тізімдер
- • Ержан
- •1.Қабатталған тізімдер
- •Кестелер тұрғызу
- •«Әкімшілік және оқытушылар» кестесін құру
- •«Тәлімгер» кестесін құру
- •9. Соөж сабақтарға әдістемелік нұсқаулар
- •Тақырыбы: Гипермәтіндік сілтемелер
- •Тақырыбы: Сырғымалы жолдарды құру
- •Тапсырма: Сырғымалы жолдарды құру
- •11. Реферат, курстық жұмыс, жоба, презентациялардың деректер қоймасы
- •12. Бақылау және жеке жұмысты жазуға техникалық талаптар
- •1. Бақылау жұмысын, титульдық бетін жұмыс құрылымын безендіру
Тақырыбы: Сырғымалы жолдар
Мақсаты: Сырғымалы жолдар құру
Тапсырма: <MARQUEE>...</MARQUEE> Сырғымалы жолдар құру
Пайдаланатын әдебиеттер: [5] 112-119 б
Практикалық жұмыс №10
Тақырыбы: Кестелер
Мақсаты: HTML-құжаттарында кесте тұрғызуды үйрену
Тапсырма: Кесте тұрғызуға керекті негізгі тэгтерді пайдалану
Пайдаланатын әдебиеттер: [1] 95-98 б, қ [7]
Практикалық жұмыс №11
Тақырыбы: Қабатталған тізімдер
Мақсаты: Қабаттлып бір-біріне кірістіріліп орналасқан тізімдерді мәтін (кітапша) мазмұндары мен әртүрлі жоспарлар дайындауда қолдану
Тапсырма: Қабатталған тізімдер жасау
Пайдаланатын әдебиеттер: [5] 190-197б
Практикалық жұмыс №12
Тақырыбы: Мәтін фрагменттерін ерекшелеу.
Мақсаты: HTML ортасында мәтін фрагментерін ерекшелеуді жүзеге асыру
Тапсырма: Экрандағы мәтіннің орналасу түрін өзгерту.
Пайдаланатын әдебиеттер: [2] 271-274 б
Практикалық жұмыс №13
Тақырыбы: Java тілімен танысу
Мақсаты: Java тілі ортасында жұмыс жасай білуге үйрету
Тапсырма: Java тілінің негізгі обьектілерін пайдалану
Пайдаланатын әдебиеттер: [1] 255-262 б.
Практикалық жұмыс №14
Тақырыбы: Скрипт
Мақсаты: Скриптермен жұмыс жасай білу
Тапсырма: Скриптерді қолдану
Пайдаланатын әдебиеттер: [6] 197-208 б, қ [1]
Практикалық жұмыс №15
Тақырыбы: Мәтінді көлденең бағытта туралау.
Мақсаты: Мәтінді қөлденең бағытта ығыстыру
Тапсырма: Құжат фоны мен жалпы мәтіннің түсін беру.
Пайдаланатын әдебиеттер: [4] 245-257 б , қ [3]
№ 1 – лабораториялық жұмыс
Лабораториялық жұмыстың мақсаты: HTML тілінің көмегімен қарапайым WEB-парақтар жасап үйрену:
Қажет құралдар мен қойылатын талаптар: дербес компьютер. Блокнот (Notepad) және Interner Explorer программалары, сонымен бірге дербес компьютерде қолданушы ретінде жұмыс жасай білу керек.
1. HTML-құжат – бұл аты.htm қосымшасы бар, қарапайым мәтіндік құжат. Мына HTML-құжатты Блокнотта теріп шығыңыздар:
<html> <head>
Менің
алғашқы парағым <title>
1-ші
мысал </title> </head> <body> <H1> Сәлем! </H1> Бұл
HTML құжаттың
ең
қарапайым
мысалы. <P>
Мәтіндер
алты
түрлі
көлеммен
көрсетіле
алады.
Олардың
түсін
де,
қаріп
типін
де,
фон
түсін
де
өзгертетін
мүмкіндіктер
бар.
Мәтін
ішіне суреттер орналастыруға да болады. </P> </body> </html>
Енді осы терілген құжатты, мысалы, T1.htm деген атпен дискіде сақтау керек.
Сонда оның белгішесі өзгеріп Интернетте көруге болатын түрге айналады.
Бұл T1.htm файлын бір мезетте Internet Explorer-де және Блокнотта ашып, оларды түрлендіріп көруге болады. Ол үшін файлды Internet Explorer-де ашқаннан соң. Түр – HTML түрінде (Вид – В виде HTML) командаларын орындау қажет. Сонда файлдың алғашқы мәтіні Блокнотта ашылып, оны түрлендіріп өзгерту мүмкіндігіне ие боламыз. Қажетті өзгертулер енгізіп оны қайта сақтап, осы өзгертулердің HTML-құжатта іске асқанын немесе Саймандар тақтасындағы осы командаға сәйкес батырманы басса болғаны.
Сонымен кез келген программа мәтінін Блокнотта терілгеннен кейін, оған өз қалауыңызша ат беріп, оны *.htm түрінде сақтау керек немесе Internet Explorer-де оны ашу қажет.
2. Программаны оқу ыңғайлы болуы үшін әрбір жол тиісінше қосымша шегіністер арқылы жазылады. Бірақ жалпы HTML құжаты үшін оның қажеті жоқ. Тіпті, броузерлер HTML-файлдардағы жолдың соңы символын және көптеген бос орындарды есепке алмайды. Сондықтан біздің мысалымыз мынадай түрде жазылуы мүмкін.
3. Бұл мысалдағы <html>…</html> белгілерінің ортасына HTML-құжаты жазылады, яғни <html> құжаттың басын, ал </html>оның аяқталғанын көрсетеді.
<head>…</head> - бұл қос белгі құжат тақырыбының басын және соңын білдіреді. Бұл бөлімде құжат тақырыбынан басқа әртүрлі қызмет атқаратын мәліметтер (төмендегі <title> белгісін қараңыз) жазылуы мүмкін, олар жайлы біз кейінірек айтамыз.
<title>…</title> - белгілерінің арасында жазылған сөздерді браузер құжаттың аты деп түсінеді де, ол терезе тақырыбында көрсетіледі. Осы құжатты принтер арқылы шығарғанда, браузер оны әр парақтың сол жақ жоғары бұрышына жазып отырады. Атаудың өте ұзын әдетте ол 64 символдан аспауы керек.
<body>…</body> - бұл қос белгі HTML-құжаттың негізгі мазмұндық бөлігінің басын және соңын білдіреді.
№ 2 – лабораториялық жұмыс
<H1>…</H1> - <H6>…</H6>
<H1> белгісі (мұндағы і – 1-ден 6-ға дейінге бүтін сан) алты түрлі сатыдағы символдар мөлшерін таңдау мүмкіндігін береді. Бірінші сатыдағы тақырып – ең ірісі, алтыншы сатыдағы - ең кішісі.
<P>…</P> немесе <P> Бұндай қос белгі абзацты сипаттайды. Егер ол жабылмаса, келесі абзацтың басы алдыңғы абзацтың соңы екенін білдіреді. Жалпы <P> және </P> белгілерінің арасына жазылғандардың барлығы бір абзац ретінде қабылданады.
<H1> және <P> белгілерінің қосымша ALIGN (оқылуы «элайн», ағылшыннан «туралау» деген сөзінен) атрибуты болуы мүмкін. Мысалы:
<H1 ALIGH=CENTER> Тақырыпты ортаға жылжыту </H1>
немесе
<P ALIGN=RIGHT> Абзацты оң жақ шетке жақындатын туралау түрі </Р>
1. Үйренгеніміздің барлығын тиянақтап, төмендегі 2-мысалды орындайық:
Бұдан былай қарапайым HTML-құжаты осы мысалдардағыдай етіп бастан аяқ құрастыруға мүмкіндік бар.
<html>
<head> <title> 2-мысал
</title> </head> <body> <H1
ALIGN=CENTER> Сәлем!
</H1> <H2>
Бұл
HTML-құжаттың сәл күрделірек мысалы </H2> <P>
Енді
біз
абзацты,
тек
сол
жақ
шетке
ғана
туралап
жазбай, <P
ALIGN=CENTER> ортаға
қарай
</P> <P ALIGN=RIGHT> немесе
оң жақ шетке де туралауға болатындығын
білеміз. </P> </body> </html>
2. Енді біз осы қарапайым HTML-құжатты қалай жақсартуға болатындығын сөз етеміз. Жаңа жолға көшу белгісінен бастайық.
<html>
<head> <title> 1-мысал
</title> </head> <body>
<H1> Сәлем!
</H1> <P>
Бұл
HTML-құжаттың ең қарапайым мысалы. </P> <P>
Бұл
*.htm файлды
Notepad және
Internet Explorer-де
ашуға
балоды.
Өзгертулер
енгізгеннен
кейін
Блокнотта
АТЫ.HTM
деген
форматта
сақтаңыз.
Енді
өзгертулердің
HTML-құжатқа
енгізгенін
көру
үшін,
файлды
жауып,
АТЫ.HTM
құжатын
шақырыңыз. </body>
</html>
<BR> белгі абзацты бөлмей, келесі сөзді жаңа жолға керек болған жағдайда қолданылады. Өлең жазуға ыңғайлы. Өлеңнен мысал келтірейік:
<html> <head> <title>3-мысал </title> </head>
<body>
<H1> Өлең</H1>
<H2>Абай </H2>
<P> Айттым сәлем, Қаламқас <BR>
Саған құрбан мал мен бас. <BR>
Сағынғаннан сені ойлап, <BR>
Келер көзге ыстық жас. </P>
<P> Көзімнің қарасы, <BR>
Көңлімнің санасы. <BR>
Бітпейді іштегі, <BR>
Ғашықтық жарасы. </P>
</body>
</html> <HR> белгісі көлденең сызық сызады. Бұл белгінің қосымша SIZE (сызықтың пиксельмен берілген қалыңдығын анықтайды) және WIDTH (экранның еніне қатысты, сызықтың пайызбен берілген ұзындығын анықтайды) атрибуттары бар. 4-мысалда көлденең сызықтардың кішігірім жинағы берілген.
<html>
<head> <title> 4-мысал
</title> </head> <body> <H1>
Көлденең
сызықтар
жинағы
</H1> <HR
SIZE=2 WIDTH=100%> <BR> <HR
SIZE=4 WIDTH=50%> <BR> <HR
SIZE=8 WIDTH=25%> <BR> <HR
SIZE=16 WIDTH=12%> <BR> </body> </html>
3. Енді түрлі түсті мәтін жазып үйренейік. Ол үшін басқа түске боялатын мәтін үзіндісін <font color=”red”>…</font> белгілерінің арасына жазу керек.
<html>
<head> <title> 3-мысал
</title> </head> <body> <H1>
Өлең
</H1> <H2> Абай
</H2> <font
color=”red”> <P>
Айттым
сәлем,
Қаламқас
<BR>
Саған
құрбан мал мен бас. <BR>
Сағынғаннан
сені ойлап, <BR>
Келер
көзге ыстық жас. </P> <P>
Көзімнің қарасы, <BR>
Көңлімнің
санасы. <BR>
Бітпейтін
іштегі, <BR>
Ғашықтық
жарасы. </P> </body>
</html>
3– лабораториялық жұмыс
Гиперсілтеме бойынша ауысу - <A> (анкер) тәгі
HTML-да мәтіннің бір фрагментінен екіншісіне ауысу үшін <A HREF=«[ауысу адресі]»> белгіленген фрагменті </A> тәгінің көмегімен орындалады. [ауысу адресі] параметрінің аргументтердің бірнеше түрін қолдануға болады. Ең қарапайымы – ауысатын HTML-құжатына атын беру. Мысалы:
<A HREF=«pr2.htm»>Мазмұн </A>
Бұл мысал HTML-құжатта Мазмұн белгіленген фрагмент пайда болады, оған тышқан курсорын апарып шерткенде келесі терезеде pr2.htm құжаты ашылады.
Назар ауддарыңыз: егер адресте каталог (бума) көрсетілмесе, онда ауысу ағымдағы каталог орындалады. Ашылған файлды көріп болғаннан кейін артқа қайтып оралу үшін браузердің тақтасындағы НАЗАД батырмасын басу керек.
Сонымен, егер сіз бір буманың ішінде орналасқан және бір – біріне сілтеме жасайтын HTML құжаттар дайындасаңыз, бұл құжаттарды жергілікті желінің немесе Интернетті компьютер бумаларына орналастырсаңыз да дәл бұрынғыдай жұмыс жасайды. Енді сіз Интернетке қосылмай-ақ көптеген құжаттар коллекциясын дайындауға мүмкіндігіңіз бар. Құжаттардың толық дайындалып, сынақтан өткеннен кейін оны толығымен Интернетке орналастыруыңызға болады.
Қажет болған жағдайда сілтемені қандайда бір құжатқа емес сол құжаттың ішіндегі бар сөзге жасауға болады. Ол үшін сілтеме барысында ашылатын құжатта қандайда бір нүктесін немесе анкер ашу керек. Мысал арқылы таңдайық.
Мәселен, pr1.htm құжатынан pr2.htm құжатының “Ауысу аяқталды” (құжаттар бір буманы орналасқан) деген сөзіне көшу керек делік. Алдымен, pr2.htm файлында мынадай анкер аш.
<A NAME=”AAA”>Ауысу аяқталды</A>