- •Қ. А. Ясауи атындағы халықаралық қазақ-түрік университеті
- •Зертханалық жұмыс № 1
- •Зертханалық жұмыс № 2
- •Зертханалық жұмыс № 3.1
- •1. Кесте ұяшықтардың құрамы.
- •2 Тапсырма:
- •1. Нөмірленген тізім.
- •2 Нөмірленбеген тізім.
- •3. Салынған тізімдер.
- •4. Анықтамалардың тізімі.
- •1 Тапсырма
- •2 Тапсырма
- •3 Тапсырма
- •4 Тапсырма
- •Зертханалық жұмыс № 4
- •1. Html-құжаттарындағы графика.
- •1 Тапсырма:
- •2 Тапсырма:
- •Зертханалық жұмыс № 5.1
- •Зертханалық жұмыс № 5.2
- •Құжаттың ішіндегі нүктелерге сілтемелер.
- •1 Тапсырма:
- •Зертханалық жұмыс № 6.1
- •Зертханалық жұмыс № 6.2
- •2Сурет . Бірнеше фреймдердің орналасуы
- •1 Тапсырма:
- •2 Тапсырма
- •3 Тапсырма
- •Зертханалық жұмыс № 7
- •1. Формадағы деректерді беру әдісі.
- •2.1.Форма жасау тәгтері
- •3 Форманың көмегімен файлдарды жіберу.
- •Зертханалық жұмыс № 8
- •Зертханалық жұмыс № 9
- •Зертханалық жұмыс № 10.1
- •Style атрибуты арқылы
- •Зертханалық жұмыс № 10.2
- •Зертханалық жұмыс № 11
- •Зертханалық жұмыс № 12
- •If, if . . . Else операторлары.
- •Зертханалық жұмыс №13
- •Зертханалық жұмыс №14
- •2 Тапсырма
- •Зертханалық жұмыс №15.1
- •Зертханалық жұмыс №15.2
- •Әдебиеттер:
- •Мазмұны
- •Аймешов ж.А.
Қ. А. Ясауи атындағы халықаралық қазақ-түрік университеті
ИНЖЕНЕРИЯ ФАКУЛЬТЕТІ
“КОМПЬЮТЕРЛІК ҒЫЛЫМДАР” КАФЕДРАСЫ
.
ИНТЕРНЕТ ТЕХНОЛОГИЯЛАР
пәні бойынша зертханалық жұмыстар
«050702-Автоматтандыру және басқару» мамандығының
3 курс студенттеріне арналған
Дайындаған: оқытушы Аймешов Ж.А.
Т
Зертханалық жұмыс Қазақстан республикасы Білім және Ғылым министрлігі 23.12.2005ж. №779 бұйрығымен бекітілген Мемлекеттік жалпыға міндетті білім стандарты, мамандықтың типтік оқу жоспары және осы пәннің университет ОӘК бекітілген оқу бағдарламасы негізінде дайындалған.
Кіріспе
Аталмыш зертханалық жұмыстар жинағы студенттердің Internet құрылымы, Internet-тің желілі протоколдары, программалау мен адрестеу принциптері, Internet- қолданбаларды әзірлеудің құралдарын меңгеруіне және де қазақ тілінде жазылға басылымдарға деген сұраныстарға байланысты туындап отыр.
Web технологияларын меңгеру бүкіләлемдік желіні қолдана отырып корпоративті құрылым әзірлейтін, динамикалық сайттар мен Web –порттарды әзірлейтін және оларды бағдарламалық қамтамасыз ететін Web – программистер мен дизайнерлерді дайындау барысында басты рөл ойнайды.
Сол себептен нұсқаудың негізгі мақсаты – интернет программалаудың технологияларын, ұйымдастыру және қызмет ету принциптерін меңгеру, интернет ортасындағы қосымшаларды жобалау әдістерін үйрету болып табылады.
Әдістемелік нұсқау 050702 –Автоматтандыру және басқару мамандығының студенттеріне арналған.
Бұл әдістемелік нұсқауды орындау барысында студенттер Web - технологияда қолданатын ұйымдастыру принциптерін, қызмет ету мен ақпаратты өндеу технологияларын, Қазіргі интернет технологиялары негізінде программалық қосымшаларды құру негіздерін, Web - технологиясының қазіргі перспективалары мен дамуы беталыстары туралы мол мағлұмат алады.
Зертханалық жұмыс № 1
Тақырыбы: HTML тілінің негіздері. HTML –құжатының құрылымы. Параграфтар, жолдар,
тақырыптар, тақырыпшалар, HTML – құжатындағы фрагменттер.
Сабақтың мақсаты: HTML- тілінің көмегімен қарапайым WEB- парақтар жасап үйрену.
Қажет құралдар мен қойылатын талаптар: дербес компьютер, Блокнот(Hotepad) және Internet Explorer программалары, сонымен бірге компьютерде қолданушы ретінде жұмыс жасай білу керек.
Жұмыстың орындалу реті:
1. Теориялық материалды игеру.
2. Жұмыстың орындалуы.
3. Бақылау сұрақтары.
Зертханалық жұмыстың орындалуына есеп беру формасы:
1. Зертханалық жұмыс номері
2. тапсырма
3. Бағдарлама мәтіні.
4. Тестілеу нәтижесі.
5. Бақылау сұрақтарына жауап беру.
Әдістемелік нұсқау
HTML форматында текст элементін қоюдың жалпы схемасы келесі түрде жазылуы
мүмкін:
<"элемент аты" "атрибуттар тізімі"> элемент мазмұны </"элемент аты">.
Элемент мазмұнының алдындағы конструкция элемент басының тегі деп аталады, ал элемент мазмұнынан кейін орналасқан конструкция элемент соңының тегі деп аталады.
HTMLқұжатының құрылысы бірінің ішіне бірі салынған контейнерлерді қолдануға мүмкіндік береді. Шынында да, құжаттың өзі – бұл "HTML" атымен аталатын бір үлкен контейнер:
<HTML> Құжат мазмұны </HTML>
HTML элементінің өзі немесе гипертексттік құжат құжаттың басынан (HEAD) және денесінен (BODY) тұрады:
<HTML> <HEAD>
Тақырып мазмұны
</HEAD> <BODY>
Құжат денесінің мазмұны
</BODY> </HTML>
WWW-да әрбір құжаттың өз аты бар, оны басында көрсетеді. Оны интерфейс-
программасының бірінші жолында көруге болады. HTML бетінің аты <TITLE>тегінің көмегімен басына қосылады.
HTML құжатын жазуды бастай отырып, оның сондай түрде болатынын теңестіреміз. Мұндай теңестіру құжаттың ең басына <!DOCTYPE HTML PUBLIC ``-//W3C//DTD HTML
3.2//EN''> тегін қою жолымен жүргізіледі. DOCTYPE тегі SGML тілінің тегі болып табылады және құжат HTML 3.2 спецификасына сәйкес сипатталатын болатынын хабарлайды.
Барлық программалау тілдеріндегідей HTMLтілінде де тексттің белгілі-бір бөліктеріне түсініктеме беретін әдісі бар. Түсініктемелер < ! - - және - - > тізбектерінің арасына жазылады.
Жұмыстың орындалу тәртібі
1. HTML- құжат-бұл аты.htm қосымшасы бар, қарапайым мәтіндік құжат.Мына,HTML-құжатты Блокнотта теріп шығыңыздар:
<html>
<head> Менің алғашқы парағым
<title>
1-ші мысал
</title>
</head>
<body>
<HI>
Сәлем!
</HI> Бұл HTLM- құжаттың ең қарапайым мысалы.
<P> Мәтіндік алты түрлі көлеммен көрсетіле алады. Олардың түсін де, қаріп типін де, фон түсін де өзгертетін мүмкіндіктер бар. Мәтін ішіне суреттер орналастыруға да болады.
</P> </body> </html>
Енді осы терілген құжатты, мысалы, Tl.html деген атпен дискіде сақтау керек. Сонда оның белгішесі өзгеріп Интернетте көруге болатын түрге айналады.
Бұл Tl.htm файлын бір мезетте Internet Explorer-де және Блокнотта ашып, оларды түрлендіріп көруге болады. Ол үшін файлды Internet Explorer-де ашқаннан соң, Түр-HTML түрінде (вид-в виде НТМL) командаларын орындау қажет.Сонда файлдың алғашқы мәтіні Блокнотта ашылып, оны түрлендіріп өзгерту мүмкіндігіне ие боламыз.Қажетті өзгертулер енгізіп оны қайта сақтап, осы өзгертулердің HTML-құжатта іске асқанын көру үшін, Internet Explorer-де Түр-Жаңалау (Вид-Обновить) командасын орындау керек немесе Саймандар тақтасында осы командаға сәйкес батырманы басса болғаны.
Сонымен кез келген программа мәтінін Блокнотта тергеннен кейін, оған өз қалауыңызша ат беріп, оны *.htm түрінде сақтау керек. Тергеніңіздің нәтижесін экранда көру үшін, оның атын тышқанмен екі шерту керек немесе Internet Explorer-де ашу қажет.
2. Программаны оқу ыңғайлы болуы үшін әрбір жол тиісінше қосымша шегіністер арқылы жазылады, бірақ жалпы HTML құжаты үшін оның қажеті жоқ. Тіпті, броузерлер HTML- файлдардағы жолдың соңғы символын және көптеген бос орындарды есепке алмайды. Сондықтан біздің мысалымыз мынадай түрде де жазылуы мүмкін:
3. Бұл мысалдағы <html>…</html> белгілерінің ортасына HTML-құжаты жазылады, яғни
<html> құжатының басын, ал </html> оның аяқталғанын көрсетеді.
<head>…</head>-бұл қос белгі құжат тақырыбының басын және соңын білдіреді. Бұл бөлімде құжат тақырыбынан басқа әртүрлі қызмет атқаратын мәліметтер (төмендегі <title> белгісін қараңыз) жазылуы мүмкін, олар жайлы біз кейінірек айтамыз.
<title>…</title>
<title> және </title> белгілерінің арасында жазылған сөздерді браузер құжаттың аты деп
түсінеді, ол терезе тақырыбында көрсетіледі.Осы құжатты принтер арқылы баспадан шығарғанда, браузер оны әр парақтың сол жақ жоғары бұрышына жазып отырады. Атаудың өте ұзын болмағаны дұрыс, әдетте ол 64 символдан аспауы керек.
<body>…</body>
Бұл қос белгі HTML-құжаттың негізгі мазмұндық белгінің басын және соңын білдіреді.
<H1>…</H1>-<H6>…</H6>
<H1> белгісі (мұндағы і-1-ден 6-ға дейінгі бүтін сан) алты түрлі сатыдағы символдар
мөлшерін таңдау мүмкіндігін береді. Бірінші сатыдағы тақырып ең ірісі, алтыншы сатыдағы ең кішісі .
<P>…</P> немесе <P>
Бұндай қос белгі абзацты сипаттайды.Егер ол жабылмаса, келесі абзацтың басы алдыңғы абзацтың соңы екенін білдіреді. Жалпы <P> және </P> белгілерінің арасында жазылғандардың барлығы бір абзац ретінде қабылданады.
<Hi> және <P> белгілерінің қосымша ALIGN (оқылуы «элайн»,ағылшынның «туралау» деген сөзінен) атрибуты болуы мүмкін.Мысалы:
<HI ALING=CENTER> тақырыпты ортаға жылжыту </HI> немесе <PALIGN=RIGHT>
абзацты оң жақ шетке жақындатып туралау түрі </P>
4.Үйренгеніміздің барлығын тиянақтап, төмендегі 2-мысалды орындайық:
Бұдан былай қарапайым HTML-құжатты осы мысалдардағыдай етіп бастан аяқ құрастыруға мүмкіндік бар.
<html><head><title> 2-мысал </title></head>
<body>
<H1 ALING=CENTER>Сәлем! </H1>
<H2> Бұл HTML-құжатының сәл күрделірек мысалы </H2>
<P> Енді біз абзацты,тек сол жақ шетке ғана туралап жазбай,
<P ALING=CENTER> ортаға қарай </P><P ALING=RIGHT>
Немесе оң жақ шетке де туралауға болатындығын білеміз.</P>
</body>
</html>
5.Енді біз осы қарапайым 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>
6.Енді түрлі түсті мәтін жазып үйренейік. Ол үшін басқа түске боялатын мәтін үзіндісін
<font color=”red”>…</font> белгілерінің арасына жазу керек.
<html><head><title>3-мысал </title></head>
<body>
<H1> өлең </H1><H2> Абай </H2>
<font color=”red”>
<P>Айттым сәлем, Қаламқас, <BR>
Саған құрбан мал мен бас. <BR> Сағынғаннан сені ойлап, <BR> Келер көзге ыстық жас. <BR> Көзімнің қарасы, <BR> Көңлімнің санасы. <BR> Бітпейтін іштегі, <BR> Ғашықтық жарасы. </font>
</body></html>
HTML базалық тегтерінің тізімі
-
Бастапқы
Соңғы
Суреттеу
<HTML>
</HTML>
HTML-құжатты белгілеу
<HEAD>
</HEAD>
Құжаттың тақырыптық бөлімі
<TITLE>
</TITLE>
Құжат тақырыбы
<BODY>
</BODY>
Құжат денесі
<H1>
</H1>
Бірінші азат жол деңгейінің тақарыбы
<H2>
</H2>
Екінші азат жол деңгейінің тақарыбы
<H3>
</H3>
Үшінші азат жол деңгейінің тақарыбы
<H4>
</H4>
Төртінші азат жол деңгейінің тақарыбы
<H5>
</H5>
Бесінші азат жол деңгейінің тақарыбы
<H6>
</H6>
Алтыншы азат жол деңгейінің тақарыбы
<P>
</P>
Азат жол
<PRE>
</PRE>
Форматталған мәтін
<BR>
Қайта-қайта азат жол аудармасы
<BLOCKQUOTE>
</BLOCKQUOTE>
Цитата
Барлық суреттелген тегтер – мұның бәрі, HTML –мен жұмыс жасау үшін қажет. Мына берілген тегтердің көмегімен жай HTML – құжатын құруға болады. Бірақ, келесі бөлімдер сіздерге HTML – дің басқа да жақсы мүмкіндіктерін және құжаттың түр- келбетін жақсартуға немесе суреттеуге көмектеседі.
Тапсырмалар
Жоғарыда айтылғандарды пайдаланып:
1. Педогогикалық кеңесті кезекті мәжіліс болатындығы жайлы хабарлама жазыңыз. Сол құжаттың нәтижесін Internet Explorer-де көргеннен кейін, өз қалауыңызша өзгерістер енгізіп, қайталап сақтаңыз. Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз.
2. Группадагы студенттердин тізімін жазыңыз.Нәтижесін көргеннен кейін өз қалауыңызша өзгерістер енгізіп, қайталап сақтаңыз.Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз.
3. Наурыз мерекесіне байланысты, Қазақстан халқына құттықтау жазыңаз.Нәтижесін экранға шығарып,өз қалауыңызша өзгерістер енгізіп,қайталап сақтаңыз. Өзгерістеріңіздің HTML- құжатқа енгендігін тексеріңіз.
4. Жаңа жыл мерекесіне байланысты Физика математика факультетінде студенттік кеш болатынын хабарлап, Internet Explorer – де көргеннен кейін, өз қалауыңызша өзгерістер енгізіп, қайталап сақтаңыз.
5. Текст үзінділерін курсив, қалың, асты сызылған және абзац тегаларын пайдаланып құжат құрыңыз.
6. Топ студенттерінің тізімін жазыңыздар. Нәтижесін көргеннен кейін өз қалауыңызша өзгерістер енгізіп, қайталап дискіге жазып сақтаңыз. Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз.
7. Жуық арада болатын мерекеге байланысты, достарыңызға құттықтау жазыңыз. Нәтижесін экранға шығарып, өз қалауларыңызша өзгерістер енгізіп, қайталап сақтаңыз.
Бақылау сұрақтары:
1. HTML құжатының құрылымы қандай?
2. HTML тілінің негізгі тәгтерін, олардың жазылуын көрсетіңіздер.
3. HTML құжаты ішінде түсініктеме беру үшін не істеу керек?
4. Тақырыптар мәтіндерінің көлемі қалай өзгертіледі?
5. ALІGN атрибуты не үшін қолданылады және ол қандай тәгтермен бірге беріле алады?
6. Өлең жолдарын жазу кезінде қандай тәг жиі қолданылады?
7. HTML тіліндегі азат жол ерекшеліктері неде? Жаңа азат жол ашу (жабу) үшін қолданылатын тәгті жазып көрсетіңіз.
8. Көлденең сызық жүргізу тәгінің атрибуттарын көрсетіңіздер.
9. Қаріптер параметрлерін өзгерту атрибуттары қандай?
10. <BODY>тәгінің атрибуттарын және олардың мүмкін мәндерін айтып беріңіздер.
11. Мәтін түсін, фон түсін қалай беруге болады?
12. <FONT> тәгінің SIZE атрибутының мәндері қалай жазылады?
13. Егер сіз көрсеткен қаріп типі тұтынушы компьютерінде болмаған жағдайда не істеуге болады?
Блиц-тест
1.Берілгендермен алмасу үшін екі компьютерді қарапайым байланыстыру:
A) Тік байланыс
B) жай байланыс
C) Екілік байланыс
D) қарапайым байланыс
Е) локальді байланыс деп аталады.
2.Ресурстар қандай типті болады:
A) электрондық, программалық, техникалық
B) аппараттық, программалық, ақпараттық
C) электрондық, программалық, ақпараттық
D) ақпараттық, электрондық, техникалық
E) жүйелік, ақпараттық, техникалық
3.Аппараттурамен қатар, компьютерлік желілердегі программалар бойынша қажет сәйкестікті қамтамасыз ету үшін:
A) программалар
B) протоколдар
C) порттар
D) шлюздер
Е) брандмауэрлер деп аталатын арнайы стандарттар әрекет етеді.
4.<TITLE> тегі не үшін қолданылады:
A) Беттің атын беру үшін
B) Беттің тақырыбын белгілеу үшін
C) Мәтіндегі цитатаны белгілеу үшін
D) Беттегі тексттің астын сызу үшін
E) Кесте тақырыбын белгілеу үшін
5.<BR> тегі:
A) Тексттегі жолды көшіру үшін
B) Беттің соңын білдіру үшін
C) Алдыңғы тег әрекетінің соңын білдіру үшін
D) Текстті бетте қарайтылған шрифтпен белгілеу үшін
E) Текстті бетте курсивпен белгілеу үшін қолданылады
6.Құжат фрагменттерін белгілеу үшін және оның экранда бейнелеуін басқаруға арналған HTML тілінің арнайы элементтері, яғни компоненттері:
А. тәгтер
Б. блоктар
В. тізімдер
Г. сілтемелер
Д. кестелер
7.Мына тұжырымдардың қайсысы дұрс:
А. Тәгтер жазу кезінде бас әріп пен кіші әріп бірдей болып саналады
Б. HTML тілінің барлық тәгтері ">" символынан басталады
В. Блокнот арқылы гипермәтіндік құжатты жасауға болмайды
Г. HTML құжатына коментарийлер енгізуге болмайды
Д. HTML мәтіндік элементтері ішіне <,>, “, @ символдары жазылады
8.HTML элементтері мынадай екі топқа бөлінеді: А. Блоктық және мәтіндік
Б. Мәтіндік және сандық
В. Символдық және цифрлық
Г. Жай және күрделі
Д. Қарапайым және құрамалы
9.<BODY> тәгінің мәтін түсін анықтайтын атрибуты:
А. TEXT
Б. BGCOLOR
В. COLOR
Г. LINK
Д. VLINK
Әдебиеттер
1. Дузбаева Р.М. Основы создания HTML-документов. Уч. пособ. для студентов. –Алматы, КБТУ 2003. –82 с.
2. Нидерст Дж. Web-мастеринг для профессионалов. –СПб.:Питер, 2001. –576
3. Информатика и образование,№8, 2000.Е. В. Давыдова
4. Симонович С., Евсеев Г., Алексеев А. Специальная информатика: Уч. пособ. -М.: АСТ-ПРЕСС: Инфорком-Пресс, 1998.-480с.
5. А. Гончаров. HTML в примерах. – СПб: "Питер", 1997.